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

const setButtonItems = () => {
  setWorkTypesItems([
    {
      title: t("operation.repair"),
      key: "fix",
      active:
        searchParams.value.work_type === "2" || !searchParams.value.work_type,
      work_type: 2,
      params: ["work_type", "sub_system_tag"],
    },
    {
      title: t("operation.maintenance"),
      key: "maintain",
      active: searchParams.value.work_type === "1",
      work_type: 1,
      params: ["work_type", "sub_system_tag"],
    }
  ]);

  setSearchTypesItems([
    // {
    //   title: t('operation.date'),
    //   key: "date",
    //   active:
    //     searchParams.value.search_type === "date" ||
    //     !searchParams.value.search_type,
    //   params: ["start_created_at", "end_created_at"],
    // },
    {
      title: t("operation.serial"),
      key: "serial",
      active: 1,
      params: ["serial_number"],
    },
  ]);
};

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

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

watch(
  [selectedWorkType, selectedSearchType],
  ([newWorkType, newSearchType]) => {
    if (newWorkType && newSearchType) {
      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,
      });
    }
  }
);
</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);
        }
      "
    />
    <OperationSearchSubSys />
    <div class="w-full flex flex-wrap items-center justify-start">
      <ButtonGroup
        :class="twMerge('mr-3')"
        :items="searchTypesItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeSearchTypeActiveBtn(item);
          }
        "
      />

      <OperationSearchType :selected="selectedSearchType" />
      <OperationActionButton :selectedWorkType="selectedWorkType" />
    </div>
  </form>
</template>

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