<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/user/user-active.webp";
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/user/user-disabled.png";
import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user-name.webp";

const props = defineProps<{
  x: number;
  y: number;
}>();

const settingsStore = useSettingsStore();

const [
  menuImage,
  menuActiveImage,
  menuDisabledImage,
  birthdayImage,
  colorImage,
  messageImage,
  userNameImage,
] = useImages(
  MENU_IMAGE,
  MENU_ACTIVE_IMAGE,
  MENU_DISABLED_IMAGE,
  BIRTHDAY_IMAGE,
  COLOR_IMAGE,
  MESSAGE_IMAGE,
  USER_NAME_IMAGE,
);

const isOpen = computed(() => settingsStore.isMenuOpen("user"));
const isAnyOtherMenuOpen = computed(() =>
  settingsStore.isAnyOtherMenuOpen("user"),
);

const animation = useMenuAnimation("user", isOpen);

useRender((ctx) => {
  ctx.translate(props.x, props.y);

  if (isOpen.value || animation.playing) {
    ctx.drawImage(
      birthdayImage!,
      -48 + animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
    ctx.drawImage(userNameImage!, 0, -48 + animation.stage1Offset);
    ctx.drawImage(
      messageImage!,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
    ctx.drawImage(
      colorImage!,
      0,
      -96 + animation.stage2Offset + animation.stage1Offset,
    );

    ctx.drawImage(menuActiveImage!, 0, 0);
  } else if (isAnyOtherMenuOpen.value) {
    ctx.drawImage(menuDisabledImage!, 0, 0);
  } else {
    ctx.drawImage(menuImage!, 0, 0);
  }
});

defineOptions({
  render: () => null,
});
</script>
