import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { ProForm, ProFormDateTimePicker } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import type { UploadProps } from 'antd';
import { Form, Input, Upload, message } from 'antd';
import { useEffect, useState } from 'react';
const EditForm = ({
  editDataInitValue,
  onFinish,
  onFormSubmit,
}: {
  [key: string]: any;
}) => {
  const t = useIntl();
  const intl = useIntl();
  const [form] = Form.useForm();
  const [imgLoading, setImgLoading] = useState<boolean>(false);
  const [imageUrl, setImageUrl] = useState<any>(null);
  const [fileFuc, setFileFuc] = useState<any>(null);
  const MAXSIZE = 5 * 1024 * 1024;
  const getBase64 = (img: any, callback: any) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };
  const fileProps: UploadProps = {
    multiple: false,
    showUploadList: false,
    listType: 'picture-card',
    accept: 'image/*',
    customRequest: (info: any) => {
      if (info.file.size < MAXSIZE) {
        setFileFuc(info.file);
        setImgLoading(true);
        getBase64(info.file, (imgUrl: any) => {
          setImageUrl(imgUrl);
          setImgLoading(false);
        });
      } else {
        message.error(
          t.formatMessage({
            id: 'tenantManage.info.overSize',
            defaultMessage: '图片尺寸过大，请上传小于5M的图片',
          }),
        );
      }
    },
  };
  const uploadButton = (
    <div>
      {imgLoading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        {t.formatMessage({
          id: 'columns.handel.upload',
          defaultMessage: '上传',
        })}
      </div>
    </div>
  );
  useEffect(() => {
    if (editDataInitValue) {
      // 数据回显
      if (editDataInitValue.companyIconPath) {
        setImageUrl(editDataInitValue.companyIconPath);
      }
    }
  }, [editDataInitValue]);
  useEffect(() => {
    // 校验表单
    if (onFormSubmit !== 0) {
      form
        .validateFields()
        .then((values) => {
          onFinish({ ...values, file: fileFuc });
        })
        .catch((errorInfo) => {
          console.log('Failed:', errorInfo);
        });
    } else {
      form.resetFields();
    }
  }, [onFormSubmit]);

  return (
    <div>
      <ProForm
        submitter={false}
        initialValues={editDataInitValue}
        name="basic"
        form={form}
        layout="vertical"
        autoComplete="off"
      >
        <Form.Item
          label={t.formatMessage({
            id: 'tenantManage.columns.companyName',
            defaultMessage: '租户名称',
          })}
          name="companyName"
          rules={[{ required: true }]}
        >
          <Input
            placeholder={intl.formatMessage({
              id: 'tenantManage.please.enter',
            })}
          />
        </Form.Item>

        <Form.Item
          label={t.formatMessage({
            id: 'tenantManage.columns.username',
            defaultMessage: '该账户管理员账号',
          })}
          name="username"
          rules={[{ required: true }]}
        >
          <Input disabled={editDataInitValue.id} autoComplete={'off'}  placeholder={intl.formatMessage({
              id: 'tenantManage.please.enter',
            })}/>
        </Form.Item>
        {!editDataInitValue.id && (
          <Form.Item
            label={t.formatMessage({
              id: 'form.label.passWord',
              defaultMessage: '密码',
            })}
            name="password"
            rules={[
              {
                required: true,
                message: t.formatMessage({
                  id: 'tenantManage.rules.pleasePassword',
                  defaultMessage: '请输入您的密码！',
                }),
              },
              {
                // eslint-disable-next-line max-len
                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,18}$/,
                message: t.formatMessage({
                  id: 'tenantManage.rules.pleaseInputCorrect',
                  defaultMessage: '请输入正确的格式！',
                }),
              },
            ]}
          >
            <Input.Password autoComplete="new-password"  placeholder={intl.formatMessage({
              id: 'tenantManage.please.enter',
            })}/>
          </Form.Item>
        )}
        <Form.Item
          label={t.formatMessage({
            id: 'tenantManage.columns.curator',
            defaultMessage: '联系人',
          })}
          name="curator"
          rules={[{ required: true }]}
        >
          <Input  placeholder={intl.formatMessage({
              id: 'tenantManage.please.enter',
            })}/>
        </Form.Item>
        <Form.Item
          label={t.formatMessage({
            id: 'tenantManage.columns.bindingDomainName',
            defaultMessage: '绑定域名',
          })}
          name="bindingDomainName"
        >
          <Input  placeholder={intl.formatMessage({
              id: 'tenantManage.please.enter',
            })}/>
        </Form.Item>
        <Form.Item
          label={t.formatMessage({
            id: 'tenantManage.columns.accountLimit',
            defaultMessage: '账号额度',
          })}
          name="accountLimit"
        >
          <Input  placeholder={intl.formatMessage({
              id: 'tenantManage.please.enter',
            })}/>
        </Form.Item>
        <ProFormDateTimePicker
          label={t.formatMessage({
            id: 'tenantManage.columns.expireTime',
            defaultMessage: '过期时间',
          })}
          name="expireTime"
          width={470}
        />
        <Form.Item
          label={t.formatMessage({
            id: 'tenantManage.columns.companyIconPath',
            defaultMessage: '租户品牌logo',
          })}
          name="file"
          valuePropName="file"
        >
          <Upload name="avatar" {...fileProps}>
            {imageUrl ? (
              <img
                src={imageUrl}
                alt="avatar"
                style={{
                  width: '100%',
                  height: '100%',
                }}
              />
            ) : (
              uploadButton
            )}
          </Upload>
        </Form.Item>
      </ProForm>
    </div>
  );
};

export default EditForm;