import { MqttFieldsEnum, MqttFieldsNameEnum } from '../../../../enum/formField/external';
import { FormSchema } from '/@/components/Form';
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();

// Credentials type
export enum CredentialsTypeEnum {
  BASIC = 'basic',
  PEM = 'cert.PEM',
  ANONYMOUS = 'anonymous',
}

export enum CredentialsTypeNameEnum {
  BASIC = 'Basic',
  ANONYMOUS = 'Anonymous',
  PEM = 'PEM',
}

export interface FileItemType {
  uid: string;
  name: string;
  data?: any;
}

export const getFileData = async (file: FileItemType) => {
  return new Promise((resolve) => {
    const fileReader = new FileReader();
    fileReader.readAsText(file as unknown as File);
    fileReader.onload = () => {
      if (fileReader.DONE === fileReader.readyState) {
        resolve({
          uid: file.uid,
          name: file.name,
          data: fileReader.result,
        });
      }
    };
  });
};

export const credentialsTypeOptions = [
  { label: CredentialsTypeNameEnum.BASIC, value: CredentialsTypeEnum.BASIC },
  { label: CredentialsTypeNameEnum.ANONYMOUS, value: CredentialsTypeEnum.ANONYMOUS },
  { label: CredentialsTypeNameEnum.PEM, value: CredentialsTypeEnum.PEM },
];

export const formSchemas = (
  setType: (
    value: CredentialsTypeEnum,
    option: { label: CredentialsTypeNameEnum; value: CredentialsTypeEnum }
  ) => void
): FormSchema[] => {
  return [
    {
      field: MqttFieldsEnum.TYPE,
      label: t(MqttFieldsNameEnum.TYPE),
      component: 'Select',
      required: true,
      defaultValue: CredentialsTypeEnum.ANONYMOUS,
      componentProps: ({ formActionType }) => {
        const { setFieldsValue } = formActionType;
        return {
          allowClear: false,
          options: credentialsTypeOptions,
          placeholder: `请选择${t(MqttFieldsNameEnum.TYPE)}`,
          getPopupContainer: () => document.body,
          onChange(
            value: CredentialsTypeEnum,
            option: { label: CredentialsTypeNameEnum; value: CredentialsTypeEnum }
          ) {
            setType(value, option);
            setFieldsValue({
              [MqttFieldsEnum.CA_CERT]: [],
              [MqttFieldsEnum.CA_CERT_FILE_NAME]: null,
              [MqttFieldsEnum.CERT]: [],
              [MqttFieldsEnum.CERT_FILE_NAME]: null,
              [MqttFieldsEnum.PRIVATE_KEY]: [],
              [MqttFieldsEnum.PRIVATE_KEY_FILE_NAME]: null,
              [MqttFieldsEnum.PASSWORD]: null,
            });
          },
        };
      },
    },
    {
      field: MqttFieldsEnum.USERNAME,
      label: t(MqttFieldsNameEnum.USERNAME),
      component: 'Input',
      required: true,
      ifShow: ({ model }) => model[MqttFieldsEnum.TYPE] === CredentialsTypeEnum.BASIC,
      componentProps: {
        placeholder: `请输入${t(MqttFieldsNameEnum.USERNAME)}`,
      },
    },
    {
      field: MqttFieldsEnum.CA_CERT_FILE_NAME,
      label: t(MqttFieldsNameEnum.CA_CERT_FILE_NAME),
      component: 'InputPassword',
      show: false,
    },
    {
      field: MqttFieldsEnum.CA_CERT,
      label: t(MqttFieldsNameEnum.CA_CERT),
      component: 'ApiUpload',
      valueField: 'fileList',
      changeEvent: 'update:fileList',
      required: true,
      ifShow: ({ model }) => model[MqttFieldsEnum.TYPE] === CredentialsTypeEnum.PEM,
      componentProps: ({ formActionType }) => {
        const { setFieldsValue } = formActionType;
        return {
          overFileLimitHiddenUploadEntry: true,
          api: getFileData,
          'onUpdate:fileList'(file: FileItemType[]) {
            setFieldsValue({ [MqttFieldsEnum.CA_CERT_FILE_NAME]: file?.[0]?.name });
          },
        };
      },
    },
    {
      field: MqttFieldsEnum.CERT_FILE_NAME,
      label: t(MqttFieldsNameEnum.CERT_FILE_NAME),
      component: 'InputPassword',
      show: false,
    },
    {
      field: MqttFieldsEnum.CERT,
      label: t(MqttFieldsNameEnum.CERT),
      component: 'ApiUpload',
      valueField: 'fileList',
      changeEvent: 'update:fileList',
      required: true,
      ifShow: ({ model }) => model[MqttFieldsEnum.TYPE] === CredentialsTypeEnum.PEM,
      componentProps: ({ formActionType }) => {
        const { setFieldsValue } = formActionType;
        return {
          overFileLimitHiddenUploadEntry: true,
          api: getFileData,
          'onUpdate:fileList'(file: FileItemType[]) {
            setFieldsValue({ [MqttFieldsEnum.CERT_FILE_NAME]: file?.[0]?.name });
          },
        };
      },
    },
    {
      field: MqttFieldsEnum.PRIVATE_KEY_FILE_NAME,
      label: t(MqttFieldsNameEnum.PRIVATE_KEY_FILE_NAME),
      component: 'InputPassword',
      show: false,
    },
    {
      field: MqttFieldsEnum.PRIVATE_KEY,
      label: t(MqttFieldsNameEnum.PRIVATE_KEY),
      component: 'ApiUpload',
      valueField: 'fileList',
      changeEvent: 'update:fileList',
      required: true,
      ifShow: ({ model }) => model[MqttFieldsEnum.TYPE] === CredentialsTypeEnum.PEM,
      componentProps: ({ formActionType }) => {
        const { setFieldsValue } = formActionType;
        return {
          overFileLimitHiddenUploadEntry: true,
          api: getFileData,
          'onUpdate:fileList'(file: FileItemType[]) {
            setFieldsValue({ [MqttFieldsEnum.PRIVATE_KEY_FILE_NAME]: file?.[0]?.name });
          },
        };
      },
    },
    {
      field: MqttFieldsEnum.PASSWORD,
      label: t(MqttFieldsNameEnum.PASSWORD),
      component: 'InputPassword',
      ifShow: ({ model }) =>
        model[MqttFieldsEnum.TYPE] === CredentialsTypeEnum.PEM ||
        model[MqttFieldsEnum.TYPE] === CredentialsTypeEnum.BASIC,
      componentProps: {
        placeholder: `请输入${t(MqttFieldsNameEnum.PASSWORD)}`,
      },
    },
  ];
};