<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    x: number;
    y: number;
    opacity?: number;
    pressed: string | null;
    isAnyOtherMenuOpen: boolean;
    submenuExtraOffsetY: number;
  }>(),
  {
    opacity: 1,
  },
);

const { onRender } = useScreen();

const store = useSettingsStore();
const { assets } = useAssets((a) => a.images.settings.topScreen.clock);

const isOpen = computed(
  () => store.currentMenu === "clock" && store.menuExpanded,
);

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

const submenuExtraOffset = (submenu: string) =>
  store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;

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

  if (isOpen.value || animation.playing) {
    (props.pressed === "clockTime" ? assets.timePressed : assets.time).draw(
      ctx,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset + submenuExtraOffset("clockTime"),
    );
    (props.pressed === "clockDate" ? assets.datePressed : assets.date).draw(
      ctx,
      0,
      -96 +
        animation.stage2Offset +
        animation.stage1Offset +
        submenuExtraOffset("clockDate"),
    );
    (props.pressed === "clockAchievements"
      ? assets.achievementsPressed
      : assets.achievements
    ).draw(
      ctx,
      0,
      -48 + animation.stage1Offset + submenuExtraOffset("clockAchievements"),
    );

    (props.pressed === "clock" ? assets.clockPressed : assets.clockActive).draw(
      ctx,
      0,
      0,
    );
  } else if (props.pressed === "clock") {
    assets.clockPressed.draw(ctx, 0, 0);
  } else if (props.isAnyOtherMenuOpen) {
    assets.clockDisabled.draw(ctx, 0, 0);
  } else {
    assets.clock.draw(ctx, 0, 0);
  }
});

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