<script setup>
import { getAssetMainList, deleteAssetMainItem } from "@/apis/asset";
import AssetMainListAddModal from "./AssetMainListAddModal.vue";
import { ref, onMounted, watch, inject } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import useActiveBtn from "@/hooks/useActiveBtn";
import { useI18n } from "vue-i18n";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const { t } = useI18n();
const { searchParams, changeParams } = useSearchParam();
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const { openToast, cancelToastOpen } = inject("app_toast");
const isEditMode = ref(false);
const formState = ref({
  id: 0,
  system_key: "",
  system_value: "",
});

const getMainSystems = async () => {
  const res = await getAssetMainList(store.selectedBuilding.building_guid);
  const cate = res.data.map((d, index) => ({
    ...d,
    title: d.system_key,
    key: d.id,
    active: searchParams.value?.mainSys_id
      ? parseInt(searchParams.value?.mainSys_id) === d.id
      : index === 0,
  }));
  setItems(cate);
};

const openModal = () => {
  asset_add_main_item.showModal();
};

const onCancel = () => {
  formState.value = {
    id: 0,
    system_key: "",
    system_value: "",
  };
  asset_add_main_item.close();
};

const edit = (item) => {
  formState.value = { ...item };
  openModal();
};

const deleteItem = async (id) => {
  openToast("warning", t("msg.sure_to_delete"), "body", async () => {
    await cancelToastOpen();
    const res = await deleteAssetMainItem(id);
    if (res.isSuccess) {
      openToast("success", t("msg.delete_success"));
      getMainSystems();
    } else {
      openToast("error", res.msg);
    }
  });
};

watch(
  () => store.selectedBuilding,
  (newBuilding) => {
    if (newBuilding) {
      getMainSystems();
    }
  },
  { immediate: true }
);

watch(selectedBtn, (newValue) => {
  changeParams({
    mainSys_id: newValue.key,
    subSys_id: null,
  });
});
</script>

<template>
  <div class="flex items-center gap-4 mb-4">
    <h2 class="text-lg font-bold ps-2 whitespace-nowrap">
      {{ $t("history.system_category") }} :
    </h2>
    <AssetMainListAddModal
      :openModal="openModal"
      :onCancel="onCancel"
      :getData="getMainSystems"
      :formState="formState"
    />
    <!-- <button
      @click.stop.prevent="isEditMode = !isEditMode"
      class="btn btn-sm btn-outline-success"
    >
      {{ isEditMode ? t("button.stop_edit") : t("button.start_edit") }}
    </button> -->
  </div>
  <ButtonConnectedGroup
    :items="items"
    :onclick="
      (e, item) => {
        if (!isEditMode) {
          changeActiveBtn(item);
        }
      }
    "
    :className="`flex w-full mt-2`"
    size="sm"
    color="info"
  >
    <template #buttonContent="{ item }">
      <span class="text-base">{{ item.title }}</span>
      <template v-if="isEditMode">
        <span
          class="ml-2 text-base text-warning"
          @click.stop.prevent="() => edit(item)"
        >
          <FontAwesomeIcon :icon="['fas', 'pencil-alt']"></FontAwesomeIcon>
        </span>
        <span
          class="text-base mx-1 text-error"
          @click.stop.prevent="() => deleteItem(item.id)"
        >
          <FontAwesomeIcon :icon="['fas', 'trash-alt']" />
        </span>
      </template>
    </template>
  </ButtonConnectedGroup>
</template>

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