<script setup>
import { onMounted, ref, watch, inject } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import OperationSearchType from "./OperationSearchType.vue";
import OperationSearchSubSys from "./OperationSearchSubSys.vue";
import OperationActionButton from "./OperationActionButton.vue";
import useSearchParam from "@/hooks/useSearchParam";
import { twMerge } from "tailwind-merge";

const { searchParams, changeParams } = useSearchParam();

const form = ref(null);

// 保養 維修 公司切換
const {
  items: workTypesItems,
  changeActiveBtn: changeWorkTypeActiveBtn,
  setItems: setWorkTypesItems,
  selectedBtn: selectedWorkType,
} = useActiveBtn();

// 日期或單號切換
const {
  items: searchTypesItems,
  changeActiveBtn: changeSearchTypeActiveBtn,
  setItems: setSearchTypesItems,
  selectedBtn: selectedSearchType,
} = useActiveBtn();

watch(
  [selectedWorkType, selectedSearchType],
  ([newWorkType, newSearchType]) => {
    if (newWorkType && newSearchType) {
      if (newWorkType.work_type === 3) {
        changeParams({ work_type: newWorkType?.work_type });
      } else {
        const oldSearchParams = Object.fromEntries(
          [...newWorkType?.params, ...newSearchType?.params].map((key) => [
            key,
            searchParams.value[key] ?? null,
          ])
        );

        changeParams({
          ...oldSearchParams,
          work_type: newWorkType?.work_type,
          search_type: newSearchType?.key,
        });
      }
    }
  }
);

onMounted(() => {
  setWorkTypesItems([
    {
      title: "維修",
      key: "fix",
      active:
        searchParams.value.work_type === "2" || !searchParams.value.work_type,
      work_type: 2,
      params: ["work_type", "sub_system_tag"],
    },
    {
      title: "保養",
      key: "maintain",
      active: searchParams.value.work_type === "1",
      work_type: 1,
      params: ["work_type", "sub_system_tag"],
    },
    {
      title: "廠商資料",
      key: "company_info",
      active: false,
      active: searchParams.value.work_type === null,
      work_type: 3,
      params: [],
    },
  ]);

  setSearchTypesItems([
    // {
    //   title: "日期",
    //   key: "date",
    //   active:
    //     searchParams.value.search_type === "date",
    //   params: ["start_created_at", "end_created_at"],
    // },
    {
      title: "單號",
      key: "serial",
      active: 1,
      params: ["serial_number"],
    },
  ]);
});
</script>

<template>
  <form
    ref="form"
    class="w-full flex flex-wrap flex-col custom-border p-4 mb-4"
  >
    <ButtonGroup
      :items="workTypesItems"
      :withLine="true"
      :onclick="
        (e, item) => {
          changeWorkTypeActiveBtn(item);
        }
      "
      class="mb-2"
    />
    <OperationSearchSubSys
      :class="twMerge(selectedWorkType?.work_type === 3 ? 'hidden' : 'block')"
    />
    <div class="w-full flex flex-wrap items-center justify-start">
      <ButtonGroup
        v-if="selectedWorkType?.work_type !== 3"
        :class="twMerge('mr-3')"
        :items="searchTypesItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeSearchTypeActiveBtn(item);
          }
        "
      />

      <OperationSearchType :selected="selectedSearchType" 
      v-if="selectedWorkType?.work_type !== 3" />
      <OperationActionButton :selectedWorkType="selectedWorkType" />
    </div>
  </form>
</template>

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