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

const settingsStore = useSettingsStore();

const { assets } = useAssets();

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

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

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

  if (isOpen.value || animation.playing) {
    ctx.drawImage(
      assets.settings.topScreen.clock.time,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
    ctx.drawImage(
      assets.settings.topScreen.clock.date,
      0,
      -96 + animation.stage2Offset + animation.stage1Offset,
    );
    ctx.drawImage(
      assets.settings.topScreen.clock.alarm,
      0,
      -48 + animation.stage1Offset,
    );

    ctx.drawImage(assets.settings.topScreen.clock.clockActive, 0, 0);
  } else if (isAnyOtherMenuOpen.value) {
    ctx.drawImage(assets.settings.topScreen.clock.clockDisabled, 0, 0);
  } else {
    ctx.drawImage(assets.settings.topScreen.clock.clock, 0, 0);
  }
});

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