<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    x: number;
    y: number;
    opacity?: number;
  }>(),
  {
    opacity: 1,
  },
);

const { onRender } = useScreen();

const settingsStore = useSettingsStore();
const menusContext = inject<{
  isSubmenuSelected: ComputedRef<boolean>;
  selectedSubmenuParent: ComputedRef<string | null>;
  selectedSubmenuExtraOffsetY: ComputedRef<number>;
}>("menusContext")!;

const { assets } = useAssets();

const isOpen = computed(
  () => settingsStore.currentMenu === "user" && settingsStore.menuExpanded,
);
const isAnyOtherMenuOpen = computed(() => {
  if (settingsStore.currentSubMenu) {
    return !settingsStore.currentSubMenu.startsWith("user");
  }
  if (menusContext.isSubmenuSelected.value) {
    return menusContext.selectedSubmenuParent.value !== "user";
  }
  return false;
});

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

const submenuExtraOffset = (submenu: string) =>
  settingsStore.selectedButton === submenu
    ? menusContext.selectedSubmenuExtraOffsetY.value
    : 0;

onRender((ctx) => {
  ctx.globalAlpha = props.opacity;
  ctx.translate(props.x, props.y);

  if (isOpen.value || animation.playing) {
    assets.images.settings.topScreen.user.birthday.draw(
      ctx,
      -48 + animation.stage2Offset,
      -48 + animation.stage1Offset + submenuExtraOffset("userBirthday"),
    );
    assets.images.settings.topScreen.user.snake.draw(
      ctx,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset + submenuExtraOffset("userSnake"),
    );
    assets.images.settings.topScreen.user.color.draw(
      ctx,
      0,
      -96 +
        animation.stage2Offset +
        animation.stage1Offset +
        submenuExtraOffset("userColor"),
    );
    assets.images.settings.topScreen.user.userName.draw(
      ctx,
      0,
      -48 + animation.stage1Offset + submenuExtraOffset("userUserName"),
    );

    assets.images.settings.topScreen.user.userActive.draw(ctx, 0, 0);
  } else if (isAnyOtherMenuOpen.value) {
    assets.images.settings.topScreen.user.userDisabled.draw(ctx, 0, 0);
  } else {
    assets.images.settings.topScreen.user.user.draw(ctx, 0, 0);
  }
});

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