import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProDescriptions,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import React, { useEffect } from 'react';

export type WebsiteFormProps = {
  onCancel: (flag?: boolean, formVals?: unknown) => void;
  onSubmit: (values: API.Website.WebsiteItem) => Promise<void>;
  open: boolean;
  values?: Partial<API.Website.WebsiteItem>;
  mode?: 'view' | 'edit' | 'create';
};

const WebsiteEdit: React.FC<WebsiteFormProps> = (props) => {
  const [form] = Form.useForm<API.Website.WebsiteItem>();
  const { mode = props.values ? 'edit' : 'create' } = props;

  useEffect(() => {
    if (props.open) {
      form.resetFields();
      if (props.values) {
        form.setFieldsValue(props.values);
      }
    }
  }, [form, props.values?.websiteId, props.open]);

  const handleCancel = () => {
    props.onCancel();
    form.resetFields();
  };

  const handleFinish = async (values: Record<string, any>) => {
    await props.onSubmit(values as API.Website.WebsiteItem);
  };

  if (mode === 'view') {
    return (
      <ModalForm
        title="网站信息详情"
        open={props.open}
        width={800}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => handleCancel(),
          footer: null,
        }}
        submitter={false}
      >
        <ProDescriptions<API.Website.WebsiteItem> column={2} dataSource={props.values || {}}>
          <ProDescriptions.Item dataIndex="websiteId" label="网站ID" />
          <ProDescriptions.Item dataIndex="websiteName" label="网站名称" />
          <ProDescriptions.Item dataIndex="websiteUrl" label="网站地址" />
          <ProDescriptions.Item dataIndex="websiteOwnerCompany" label="归属单位公司" />
          <ProDescriptions.Item
            dataIndex="isActive"
            label="是否启用"
            valueEnum={{
              '0': { text: '启用' },
              '2': { text: '未启用' },
            }}
          />
        </ProDescriptions>
      </ModalForm>
    );
  }

  return (
    <ModalForm<API.Website.WebsiteItem>
      title={mode === 'edit' ? '编辑网站信息' : '新建网站信息'}
      form={form}
      autoFocusFirstInput
      open={props.open}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => handleCancel(),
      }}
      submitTimeout={2000}
      onFinish={handleFinish}
    >
      <ProForm.Group>
        <ProFormText width="md" hidden name="websiteId" />
        <ProFormText
          width="md"
          name="websiteName"
          label="网站名称"
          placeholder="请输入网站名称"
          rules={[{ required: true, message: '请输入网站名称!' }]}
        />
        <ProFormText
          width="md"
          name="websiteUrl"
          label="网站地址"
          placeholder="请输入网站地址"
          rules={[
            { required: true, message: '请输入网站地址!' },
            { type: 'url', message: '请输入有效的网址!' },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width="md"
          name="websiteOwnerCompany"
          label="归属单位公司"
          placeholder="请输入归属单位公司"
          rules={[{ required: true, message: '请输入归属单位公司!' }]}
        />
        <ProFormSelect
          width="md"
          name="isActive"
          label="是否启用"
          valueEnum={{
            '0': '启用',
            '2': '未启用',
          }}
          placeholder="请选择状态"
          rules={[{ required: true, message: '请选择是否启用!' }]}
        />
      </ProForm.Group>
    </ModalForm>
  );
};

export default WebsiteEdit;