<script setup>
import Checkbox from "@/components/customUI/Checkbox.vue";
import { computed, onMounted, ref, watch, inject } from "vue";
import { getAssetSubList } from "@/apis/asset";
import useSearchParam from "@/hooks/useSearchParam";
import useActiveBtn from "@/hooks/useActiveBtn";

const { searchParams, changeParams } = useSearchParam();
const { search } = inject("operation_table");
const subSys = ref([]);
const filterSubSys = ref([]);

const {
  items: iotTypesItems,
  changeActiveBtn: changeIotTypeActiveBtn,
  setItems: setIotTypesItems,
  selectedBtn: selectedIotType,
} = useActiveBtn();

const getSubSystems = async () => {
  const res = await getAssetSubList();
  const sub = res.data.map((d, index) => ({
    ...d,
    title: d.system_key,
    key: d.id,
    sub_system_tag: d.system_value,
  }));
  subSys.value = sub;
  filterSubSys.value = subSys.value.filter((item) => 
    item.is_IOT === (Number(selectedIotType.value.key) )
  );

  changeParams({
    ...searchParams.value,
    sub_system_tag: filterSubSys.value.map((item) => item.sub_system_tag),
  });
};

onMounted(() => {
  setIotTypesItems([
    { title: "IOT設備", key: "1", active: true },
    { title: "非IOT設備", key: "0", active: false },
  ]);
  getSubSystems();
});

const changeCheckedItem = () => {
  const isAllSelected = checkedItem.value.length === filterSubSys.value.length;
  const updatedTags = isAllSelected
    ? []
    : filterSubSys.value.map((item) => item.sub_system_tag);

  changeParams({ ...searchParams.value, sub_system_tag: updatedTags });
};

const onChange = (value, checked) => {
  const currentTags = Array.isArray(searchParams.value.sub_system_tag)
    ? [...searchParams.value.sub_system_tag]
    : searchParams.value.sub_system_tag
    ? [searchParams.value.sub_system_tag]
    : [];

  const updatedTags = checked
    ? [...currentTags, value]
    : currentTags.filter((tag) => tag !== value);

  changeParams({ ...searchParams.value, sub_system_tag: updatedTags });
};

const checkedItem = computed(() =>
  Array.isArray(searchParams.value.sub_system_tag)
    ? searchParams.value.sub_system_tag
    : searchParams.value.sub_system_tag
    ? [searchParams.value.sub_system_tag]
    : []
);

watch(selectedIotType, (newValue, oldValue) => {
  if (newValue?.key) {
    // 過濾子系統資料
    filterSubSys.value = subSys.value
    .filter((item) =>
      item.is_IOT === (Number(newValue.key))
    );

    if (filterSubSys.value.length > 0) {
      changeParams({
        ...searchParams.value,
        sub_system_tag: filterSubSys.value.map((item) => item.sub_system_tag),
      });
    }
  }
});

watch(
  searchParams,
  (newValue, oldValue) => {
    if (
      newValue.work_type &&
      oldValue.work_type &&
      newValue.work_type !== oldValue.work_type
    ) {
      changeParams({
        ...searchParams.value,
        sub_system_tag: filterSubSys.value.map((item) => item.sub_system_tag),
      });
      search();
    }
  }
);
</script>

<template>
  <div class="flex flex-col">
    <ButtonGroup
      :items="iotTypesItems"
      :withLine="true"
      :onclick="
        (e, item) => {
          changeIotTypeActiveBtn(item);
        }
      "
      class="mb-3"
    />
    <div class="flex flex-wrap mb-3">
      <button
        class="btn btn-success mr-4"
        @click.stop.prevent="changeCheckedItem"
      >
        {{ checkedItem.length === filterSubSys.length ? "取消全選" : "全選" }}
      </button>
      <Checkbox
        v-for="sub in filterSubSys"
        :key="sub.key"
        :title="sub.title"
        :value="sub.sub_system_tag"
        :checked="checkedItem.includes(sub.sub_system_tag)"
        class="mx-3 my-3 xl:my-0 text-lg"
        :onChange="onChange"
      />
    </div>
  </div>
</template>

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