<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";
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n(); 
const props = defineProps({
  selected: Object,
});

const { searchParams, changeParams } = useSearchParam();

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

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

const setButtonAndDateItems = () => {
  setDateItems([
    {
      title: t('operation.today'),
      key: "today",
      active: true,
    },
    {
      title: t('operation.yesterday'),
      key: "yesterday",
      active: false,
    },
  ]);

  setSearchDateItems([
    {
      key: "start_created_at",
      value: searchParams.value?.start_created_at || dayjs(),
      dateFormat: "yyyy-MM-dd",
      placeholder: t('operation.start_created_at'),
    },
    {
      key: "end_created_at",
      value: searchParams.value?.end_created_at || dayjs(),
      dateFormat: "yyyy-MM-dd",
      placeholder: t('operation.end_created_at'),
    },
  ]);
};

onMounted(() => {
  setButtonAndDateItems();
});

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

watch(selectedDate, (newDate) => {
  if (newDate.key === "today") {
    setSearchDateItems([
      {
        key: "start_created_at",
        value: dayjs(),
        dateFormat: "yyyy-MM-dd",
        placeholder: t('operation.start_created_at'),
      },
      {
        key: "end_created_at",
        value: dayjs(),
        dateFormat: "yyyy-MM-dd",
        placeholder: t('operation.end_created_at'),
      },
    ]);
  } else if (newDate.key === "yesterday") {
    setSearchDateItems([
      {
        key: "start_created_at",
        value: dayjs().date(dayjs().get("date") - 1),
        dateFormat: "yyyy-MM-dd",
        placeholder: t('operation.start_created_at'),
      },
      {
        key: "end_created_at",
        value: dayjs().date(dayjs().get("date") - 1),
        dateFormat: "yyyy-MM-dd",
        placeholder: t('operation.end_created_at'),
      },
    ]);
  }
});

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>
  <ButtonGroup
    v-if="selected?.key === 'date' "
    :items="DateItems"
    :withLine="true"
    :onclick="
      (e, item) => {
        changeDateActiveBtn(item);
      }
    "
  />
  <DateGroup
    :isTopLabelExist="false"
    :isBottomLabelExist="false"
    v-if="selected?.key === 'date' "
    :items="searchDateItems"
    :withLine="true"
  />
  <Input
    v-else
    :isTopLabelExist="false"
    :isBottomLabelExist="false"
    name="serial_number"
    :class="twMerge(searchParams?.work_type === '3' ? '' : 'mr-3')"
    :placeholder="searchParams?.work_type === '3' ? $t('operation.enter_text') : $t('operation.enter_serial')"
    :value="searchParams"
  />
</template>

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