<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/clock/clock-active.webp";
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/clock/clock-disabled.png";
import ALARM_IMAGE from "/assets/images/settings/top-screen/clock/alarm.webp";
import TIME_IMAGE from "/assets/images/settings/top-screen/clock/time.webp";
import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";

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

const [
  menuImage,
  menuActiveImage,
  menuDisabledImage,
  alarmImage,
  timeImage,
  dateImage,
] = useImages(
  MENU_IMAGE,
  MENU_ACTIVE_IMAGE,
  MENU_DISABLED_IMAGE,
  ALARM_IMAGE,
  TIME_IMAGE,
  DATE_IMAGE,
);

const animation = useMenuAnimation(toRef(() => props.isOpen));

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

  if (props.isOpen || animation.playing) {
    ctx.drawImage(
      timeImage!,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
    ctx.drawImage(
      dateImage!,
      0,
      -96 + animation.stage2Offset + animation.stage1Offset,
    );
    ctx.drawImage(alarmImage!, 0, -48 + animation.stage1Offset);

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

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