<template>
  <div>
    <Card size="small" style="min-width: 100px; width: min-content">
      <template #title>
        {{ timeToDate(props.day) }}
        <br />
        {{ timeToDayName(new Date(props.day)) }}
      </template>

      <a-card-grid
        v-for="interval in page.intervals"
        style="width: 100%; text-align: center; padding: 1px"
      >
        <Interval
          :interval="interval"
          :checked="page.checked.get(interval)"
          :add="add"
          :remove="remove"
        ></Interval>
      </a-card-grid>
    </Card>
  </div>
</template>
<script setup lang="ts">
import { timeToDate } from "@/composables/misc";
import { onMounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
import Interval from "@/components/common/approval/Interval.vue";
import Card from "ant-design-vue/es/card/Card";
const { t } = useI18n();

const props = defineProps<{
  day: string;
  add: Function;
  remove: Function;
  checked?: string[];
}>();

const page = reactive<{
  intervals: string[];
  checked: Map<string, boolean>;
}>({
  intervals: [],
  checked: new Map<string, boolean>(),
});

onMounted(() => {
  if (props.checked) {
    props.checked.forEach((element) => {
      page.checked.set(element, true);
    });
  }
  page.intervals = formIntervals();
});

function formIntervals(): string[] {
  let res: string[] = [];

  for (let hour = 6; hour < 22; hour++) {
    let hourStr = String(hour);
    if (hour < 10) {
      hourStr = "0" + hourStr;
    }
    res.push(hourStr + ":00" + " - " + hourStr + ":30");

    let nextHour = hour + 1;
    let nextHourStr = String(nextHour);
    if (nextHour < 10) {
      nextHourStr = "0" + nextHourStr;
    }
    res.push(hourStr + ":30" + " - " + nextHourStr + ":00");
  }
  return res;
}

function add(interval: string) {
  return props.add(props.day + "|" + interval);
}

function remove(interval: string) {
  return props.remove(props.day + "|" + interval);
}

function timeToDayName(date: Date): string {
  switch (date.getDay()) {
    case 1:
      return t(
        "components.user.calendars.share_free_time.work_days_names.monday"
      );
    case 2:
      return t(
        "components.user.calendars.share_free_time.work_days_names.tuesday"
      );
    case 3:
      return t(
        "components.user.calendars.share_free_time.work_days_names.wednesday"
      );
    case 4:
      return t(
        "components.user.calendars.share_free_time.work_days_names.thursday"
      );
    case 5:
      return t(
        "components.user.calendars.share_free_time.work_days_names.friday"
      );
    case 6:
      return t(
        "components.user.calendars.share_free_time.work_days_names.saturday"
      );
    case 0:
      return t(
        "components.user.calendars.share_free_time.work_days_names.sunday"
      );
  }

  return "";
}
</script>
