<script setup>
import useActiveBtn from "@/hooks/useActiveBtn";
import { onMounted, defineProps, watch, ref } from "vue";
import dayjs from "dayjs";
import useSearchParam from "@/hooks/useSearchParam";
import { twMerge } from "tailwind-merge";

const props = defineProps({
  selected: String,
});

const { searchParams, changeParams } = useSearchParam();

// 如果是日期查詢的話
const {
  items: DateItems,
  changeActiveBtn: changeDateActiveBtn,
  setItems: setDateItems,
  selectedBtn: selectedDate,
} = useActiveBtn();

const {
  items: searchDateItems,
  changeActiveBtn: changeSearchDateItemActiveBtn,
  setItems: setSearchDateItems,
} = useActiveBtn();

onMounted(() => {
  setDateItems([
    {
      title: "今天",
      key: "today",
      active: true,
    },
    {
      title: "昨天",
      key: "yesterday",
      active: false,
    },
  ]);

  setSearchDateItems([
    {
      key: "start_created_at",
      value: searchParams.value?.start_created_at || dayjs(),
      dateFormat: "yyyy-MM-dd",
      placeholder: "起始日期",
    },
    {
      key: "end_created_at",
      value: searchParams.value?.end_created_at || dayjs(),
      dateFormat: "yyyy-MM-dd",
      placeholder: "結束時間",
    },
  ]);
});

watch(selectedDate, (newDate) => {
  if (newDate.key === "today") {
    setSearchDateItems([
      {
        key: "start_created_at",
        value: dayjs(),
        dateFormat: "yyyy-MM-dd",
        placeholder: "起始日期",
      },
      {
        key: "end_created_at",
        value: dayjs(),
        dateFormat: "yyyy-MM-dd",
        placeholder: "結束時間",
      },
    ]);
  } else if (newDate.key === "yesterday") {
    setSearchDateItems([
      {
        key: "start_created_at",
        value: dayjs().date(dayjs().get("date") - 1),
        dateFormat: "yyyy-MM-dd",
        placeholder: "起始日期",
      },
      {
        key: "end_created_at",
        value: dayjs().date(dayjs().get("date") - 1),
        dateFormat: "yyyy-MM-dd",
        placeholder: "結束時間",
      },
    ]);
  }
});

const serial_number = ref("");

watch(
  [searchDateItems, serial_number, searchParams],
  ([newValue, newSerialNumber, newSearchParams]) => {
    if (newSearchParams.search_type === "date") {
      changeParams({
        ...searchParams.value,
        ...Object.fromEntries(
          newValue.map(({ key, value }) => [
            key,
            value && dayjs(value).format("YYYY-MM-DD"),
          ])
        ),
      });
    } else if (newSearchParams.search_type === "serial") {
      changeParams({
        ...searchParams.value,
        serial_number: newSerialNumber,
      });
    }
  },
  {
    deep: true,
  }
);
</script>

<template>
  <div>
    <ButtonGroup
      v-if="selected?.key === 'date' && searchParams?.work_type !== '3'"
      :items="DateItems"
      :withLine="true"
      :onclick="
        (e, item) => {
          changeDateActiveBtn(item);
        }
      "
    />
    <DateGroup
      :isTopLabelExist="false"
      :isBottomLabelExist="false"
      v-if="selected?.key === 'date' && searchParams?.work_type !== '3'"
      :items="searchDateItems"
      :withLine="true"
    />
    <Input
      v-else
      :isTopLabelExist="false"
      :isBottomLabelExist="false"
      name="serial_number"
      :class="twMerge(searchParams?.work_type === '3' ? '' : 'mr-3')"
      placeholder="請輸入單號"
      :value="searchParams"
    />
  </div>
</template>

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