<script setup lang="ts">
  import { Button, Divider } from 'ant-design-vue';
  import { cloneDeep } from 'lodash';
  import { toRaw, unref } from 'vue';
  import CreateStructModal from './CreateStructModal.vue';
  import { StructJSON } from '/@/api/device/model/modelOfMatterModel';
  import { useModal } from '/@/components/Modal';
  import { DataTypeEnum } from '/@/enums/objectModelEnum';
  import { DataActionModeEnum } from '/@/enums/toolEnum';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      buttonName?: string;
      disabled?: boolean;
      value?: StructJSON[];
      dataType?: DataTypeEnum[];
      mode?: DataActionModeEnum;
    }>(),
    {
      value: () => [],
      dataType: () => Object.values(DataTypeEnum),
    }
  );

  const emits = defineEmits(['update:value']);

  const [registerModal, { openModal, closeModal }] = useModal();

  const handleOpenCreateModal = () => {
    openModal(true, {
      mode: DataActionModeEnum.CREATE,
    } as ModalParamsType);
  };

  const handleEdit = (item: StructJSON) => {
    openModal(true, {
      mode: DataActionModeEnum.UPDATE,
      record: cloneDeep(item),
    } as ModalParamsType);
  };

  const handleDelete = (item: StructJSON) => {
    const index = props.value.findIndex((temp) => item.identifier === temp.identifier);

    if (~index) {
      const _values = cloneDeep(props.value);
      _values.splice(index, 1);
      emits('update:value', _values);
    }
  };

  const handleEditComplete = (value: StructJSON, currentEditIndex: number) => {
    const _value = cloneDeep(toRaw(unref(props.value)));
    if (~currentEditIndex) {
      _value.splice(currentEditIndex, 1, value);
    } else {
      _value.push(value);
    }
    emits('update:value', _value);
    closeModal();
  };
</script>

<template>
  <section>
    <main>
      <div
        v-for="item in value"
        :key="item.identifier"
        class="flex items-center justify-between px-2 py-1 mb-2 bg-blue-50 text-gray-600"
      >
        <div>
          <span>{{ t('deviceManagement.product.parameterNameText') }}:</span>
          <span class="ml-1">{{ item.functionName }}</span>
        </div>
        <div>
          <Button type="link" @click="handleEdit(item)">
            {{ mode === DataActionModeEnum.READ ? t('common.detailText') : t('common.editText') }}
          </Button>
          <Divider type="vertical" />
          <Button
            type="link"
            @click="handleDelete(item)"
            :disabled="mode === DataActionModeEnum.READ"
          >
            {{ t('common.delText') }}
          </Button>
        </div>
      </div>
    </main>
    <Button type="link" @click="handleOpenCreateModal" :disabled="mode === DataActionModeEnum.READ">
      {{ buttonName || t('deviceManagement.product.createStructItemText') }}
    </Button>
    <CreateStructModal
      :value="value"
      @register="registerModal"
      @complete="handleEditComplete"
      :dataType="dataType"
      :mode="mode"
    />
  </section>
</template>