<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
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;
}>();

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

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

  ctx.drawImage(menuImage!, 0, 0);

  if (props.isOpen) {
    ctx.drawImage(alarmImage!, 0, -48);
    ctx.drawImage(timeImage!, 48, -48);
    ctx.drawImage(dateImage!, 0, -96);
  }
});

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