<script setup>
import { ref, watch, onMounted } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";

import useSearchParam from "@/hooks/useSearchParam";
import dayjs from "dayjs";

const { searchParams, changeParams } = useSearchParam();

// 選時間或日期
const {
  items: searchTypeItems,
  changeActiveBtn,
  setItems,
  selectedBtn: selectedType,
} = useActiveBtn();

const itemsForStartTime = ref([]);

const itemsForEndTime = ref();

onMounted(() => {
  setItems([
    {
      title: "日期區間",
      key: "dateRange",
      active: searchParams.value.Type
        ? parseInt(searchParams.value.Type) === 1
        : true,
      Type: 1,
    },
    {
      title: "時間區間",
      key: "startMonthTime",
      active: searchParams.value.Type
        ? parseInt(searchParams.value.Type) === 2
        : false,
      Type: 2,
    },
  ]);

  itemsForStartTime.value = [
    {
      key: "Start_date",
      value: searchParams.value?.Start_date
        ? dayjs(searchParams.value?.Start_date)
        : dayjs(),
      dateFormat: "yyyy-MM-dd",
      placeholder: "起始日期",
    },
    {
      key: "Start_time",
      value: { hours: 0, minutes: 0, seconds: 0 },
      dateFormat: "HH:mm",
      timePicker: true,
      placeholder: "起始時間",
    },
  ];

  itemsForEndTime.value = [
    {
      key: "End_date",
      value: searchParams.value?.End_date
        ? dayjs(searchParams.value?.End_date)
        : dayjs(),
      dateFormat: "yyyy-MM-dd",
      placeholder: "結束日期",
    },
    {
      key: "End_time",
      value: {
        hours: dayjs().format("HH"),
        minutes: dayjs().format("mm"),
        seconds: 0,
      },
      dateFormat: "HH:mm",
      timePicker: true,
      placeholder: "結束時間",
    },
  ];
});

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,
        Type: selectedType.value.Type,
        Start_time: dayjs(`${dates.Start_date} ${times.Start_time}`).format(
          "HH:mm"
        ),
        End_time: dayjs(`${dates.End_date} ${times.End_time}`).format("HH:mm"),
      });
    }
  },
  {
    deep: true,
  }
);

watch(selectedType, (newVal, oldVal) => {
  if (newVal && newVal.Type != oldVal?.Type)
    changeParams({ ...searchParams.value, Type: newVal.Type });
});
</script>

<template>
  <ButtonGroup
    :items="searchTypeItems"
    :withLine="true"
    :onclick="
      (e, item) => {
        changeActiveBtn(item);
      }
    "
  />
  <DateGroup class="mr-3" :items="itemsForStartTime" :withLine="true" />
  <DateGroup :items="itemsForEndTime" :withLine="true" />
</template>

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