<script setup lang="ts">
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
import { useIntervalFn } from "@vueuse/core";

const store = useSettingsStore();
const { assets } = useAssets();
const { onRender } = useScreen();

const now = ref(new Date());

useIntervalFn(() => {
  now.value = new Date();
}, 1000);

const handleCancel = () => {
  store.closeSubMenu();
};

const handleConfirm = () => {
  store.closeSubMenu();
};

onRender((ctx) => {
  assets.images.home.topScreen.background.draw(ctx, 0, 0);

  assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 112, 63);
});

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

<template>
  <NumberInput
    :model-value="now.getHours()"
    title="Hour"
    :x="4 * 16 - 1"
    :disabled="true"
  />
  <NumberInput
    :model-value="now.getMinutes()"
    title="Minute"
    :x="9 * 16 - 1"
    :disabled="true"
  />

  <CommonButtons
    :y-offset="0"
    b-label="Cancel"
    a-label="Confirm"
    @activate-b="handleCancel"
    @activate-a="handleConfirm"
  />
</template>
