<script setup>
import { ref, watch, onMounted } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import useActiveBtn from "@/hooks/useActiveBtn";

const { t, locale } = useI18n();
const { searchParams, changeParams } = useSearchParam();
const route = useRoute();
const {
  items: searchTypeItems,
  changeActiveBtn: changeTypeActiveBtn,
  setItems: setTypeItems,
  selectedBtn: selectedTypeItems,
} = useActiveBtn();

const itemsForStartTime = ref([]);

const itemsForEndTime = ref();

const initializeItems = () => {
  setTypeItems([
    {
      title: t("history.date_range"),
      key: 1,
      active: searchParams.value.Type
        ? parseInt(searchParams.value.Type) === 1
        : true,
    },
    {
      title: t("history.time_range"),
      key: 2,
      active: searchParams.value.Type
        ? parseInt(searchParams.value.Type) === 2
        : false,
    },
  ]);

  itemsForStartTime.value = [
    {
      key: "Start_date",
      value: searchParams.value?.Start_date
        ? dayjs(searchParams.value?.Start_date)
        : dayjs(),
      dateFormat: "yyyy-MM-dd",
      placeholder: t("history.start_date"),
    },
    {
      key: "Start_time",
      value: { hours: 0, minutes: 0, seconds: 0 },
      dateFormat: "HH:mm",
      timePicker: true,
      placeholder: t("history.start_time"),
    },
  ];

  itemsForEndTime.value = [
    {
      key: "End_date",
      value: searchParams.value?.End_date
        ? dayjs(searchParams.value?.End_date)
        : dayjs(),
      dateFormat: "yyyy-MM-dd",
      placeholder: t("history.end_date"),
    },
    {
      key: "End_time",
      value: {
        hours: dayjs().format("HH"),
        minutes: dayjs().format("mm"),
        seconds: 0,
      },
      dateFormat: "HH:mm",
      timePicker: true,
      placeholder: t("history.end_time"),
    },
  ];
};

watch(
  () => route.params.type,
  () => {
    initializeItems();
  },
  {
    immediate: true,
  }
);

watch(locale, () => {
  initializeItems();
});

watch(
  [itemsForStartTime, itemsForEndTime],
  ([newStart, newEnd]) => {
    if (newStart && newEnd) {
      const dates = Object.fromEntries(
        [newStart[0], newEnd[0]].map(({ key, value, dateFormat }) => [
          key,
          dayjs(value).format(dateFormat.toLocaleUpperCase()),
        ])
      );

      const times = Object.fromEntries(
        [newStart[1], newEnd[1]].map(
          ({ key, value, dateFormat }, index, arr) => [
            key,
            `${value.hours}:${value.minutes}`,
          ]
        )
      );
      changeParams({
        ...searchParams.value,
        ...dates,
        Start_time: dayjs(`${dates.Start_date} ${times.Start_time}`).format(
          "HH:mm"
        ),
        End_time: dayjs(`${dates.End_date} ${times.End_time}`).format("HH:mm"),
      });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

watch(selectedTypeItems, (newValue) => {
  changeParams({
    ...searchParams.value,
    Type: newValue.key,
  });
});
</script>

<template>
  <div class="flex items-center gap-4 mb-4">
    <h2 class="text-lg font-bold ps-2 whitespace-nowrap">
      {{ $t("history.date_range") }} :
    </h2>
    <ButtonGroup
      v-if="route.params.type == 1"
      :items="searchTypeItems"
      :withLine="true"
      :onclick="
        (e, item) => {
          changeTypeActiveBtn(item);
        }
      "
    />
    <DateGroup class="mr-3" :items="itemsForStartTime" :withLine="true" />
    <DateGroup :items="itemsForEndTime" :withLine="true" />
  </div>
</template>

<style lang="scss" scoped></style>
