import { message, Form } from 'ant-design-vue/lib';
import { reactive, watch } from 'vue';
import { graphG6 } from './useGraph';
import useI18n from '@/hooks/useI18n';

/**图分组内置类型 */
export const comboTypeOptions = [
  {
    value: 'circle',
    label: '圆形',
  },
  {
    value: 'rect',
    label: '矩形',
  },
];

/**图分组标签文本位置 */
export const comboPositionOptions = [
  {
    value: 'top',
    label: '上',
  },
  {
    value: 'left',
    label: '左',
  },
  {
    value: 'right',
    label: '右',
  },
  {
    value: 'bottom',
    label: '下',
  },
  {
    value: 'center',
    label: '居中',
  },
];

export default function useCombo() {
  const { t } = useI18n();

  /**图分组信息状态类型 */
  type ComboStateType = {
    /**图分组原始数据 */
    origin: Record<string, any>;
    /**图分组表单数据 */
    form: Record<string, any>;
  };

  /**图分组信息状态 */
  let comboState: ComboStateType = reactive({
    origin: {},
    form: {
      id: '',
      type: 'rect',
      parentId: '',
      size: [40, 40],
      padding: [30, 30, 30, 30],
      style: {
        fill: '#ffffff',
        stroke: '#ffffff',
        lineWidth: 1,
      },
      label: '',
      labelCfg: {
        refX: 10,
        refY: 10,
        position: 'top',
        style: {
          fill: '#000000',
          fontSize: 12,
          fontWeight: 500,
        },
      },
    },
  });

  /**图分组对话分组内表单属性和校验规则 */
  const comboStateForm = Form.useForm(
    comboState.form,
    reactive({
      id: [{ required: true, message: '分组唯一标识 ID' }],
    })
  );

  /**图分组编辑监听更新视图 */
  watch(comboState.form, combo => {
    const info = JSON.parse(JSON.stringify(combo));
    const comboId = info.id;
    if (comboId) {
      graphG6.value.clearItemStates(comboId, 'selected');
      console.log(info);
      const data = graphG6.value.save();
      const item = data.combos.find((item: any) => item.id === combo.id);
      Object.assign(item, combo);
      // 无父组id时不要设置，避免导致绘制失败
      if (!combo.parentId) {
        Reflect.deleteProperty(item, 'parentId');
      }
      graphG6.value.read(data);
    }
  });

  /**图分组类型输入限制 */
  function handleComboTypeChange(type: any) {
    // 类型尺寸和边距
    if (type === 'circle') {
      comboState.form.size = 30;
      comboState.form.padding = 30;
    }
    if (type === 'rect') {
      comboState.form.size = [30, 20];
      comboState.form.padding = [10, 20, 10, 20];
    }
  }

  /**图分组新增或更新 */
  function handleOkcombo() {
    const combo = JSON.parse(JSON.stringify(comboState.form));
    if (!combo.id) {
      message.warn({
        content: `分组元素ID错误`,
        duration: 2,
      });
      return false;
    }

    const item = graphG6.value.findById(combo.id);
    if (item) {
      const data = graphG6.value.save();
      const item = data.combos.find((item: any) => item.id === combo.id);
      Object.assign(item, combo);
      if (!combo.parentId) {
        Reflect.deleteProperty(item, 'parentId');
      }
      graphG6.value.read(data);
    } else {
      graphG6.value.createCombo(combo, []);
    }
    comboStateForm.resetFields();
    comboState.origin = {};
    return true;
  }

  /**图分组取消还原 */
  function handleCancelcombo() {
    const origin = JSON.parse(JSON.stringify(comboState.origin));
    if (origin.id) {
      const data = graphG6.value.save();
      const item = data.combos.find((combo: any) => combo.id === origin.id);
      Object.assign(item, origin);
      graphG6.value.read(data);
      comboStateForm.resetFields();
      comboState.origin = {};
    }
  }

  return {
    comboState,
    comboStateForm,
    handleComboTypeChange,
    handleOkcombo,
    handleCancelcombo,
  };
}