import { Button, Col, Divider, Form, Modal, Row, Select } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { useEffect } from 'react';
import styles from './index.less';
import type { IFormValue } from '@/pages/PromptWord';

interface IEditPromptModalProps {
  open: boolean;
  setOpen: (value: boolean) => void;
  types: string[];
  modalType: 'create' | 'edit' | '';
  handleEditPrompt: (value: IFormValue) => void;
  oldRow: IFormValue;
  loading?: boolean;
  handleCreatePrompt: (value: IFormValue) => void;
}

const EditPromptModal = (props: IEditPromptModalProps) => {
  const { open, setOpen, types, modalType, handleEditPrompt, loading, oldRow, handleCreatePrompt } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (modalType === 'create') {
      form.resetFields()
    } 

    if (modalType === 'edit') {
      form.setFieldsValue({
        type: oldRow.type,
        content: oldRow.content,
      })
    }
  }, [open]);

  const handleSavePrompt = async () => {
    const { type, content } = form.getFieldsValue();
    if (modalType === 'create') {
      await handleCreatePrompt({
        type,
        content
      });
    }

    if (modalType === 'edit') {
      await handleEditPrompt({
        type,
        content,
      });
    }

    setOpen(false);
  };

  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  };

  return (
    <Modal
      open={open}
      centered
      confirmLoading={loading}
      wrapClassName={styles.modal}
      title={modalType === 'create' ? '新增提示用语' : '编辑提示用语'}
      okText="保存"
      onOk={() => {
        setOpen(false);
      }}
      onCancel={() => {
        setOpen(false);
      }}
      width={574}
      footer={null}
    >
      <Form 
        form={form}
        name="editAndCrateForm"
        {...layout}
        onFinish={handleSavePrompt}
      >
        <Form.Item 
          label="类型"
          name={"type"}
          rules={[
            { required: true, message: '请选择类型！' },
          ]}
        >
          <Select
            placeholder='请选择'
          >
            {types.map((item) => (
              <Select.Option value={item} key={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item 
          label="提示词语"
          name={"content"}
          rules={[
            { required: true, message: '请输入提示用语！' },
          ]}
        >
          <TextArea
            style={{
              height: '200px',
            }}
          />
        </Form.Item>
        <Divider />
        <Row justify={'end'} gutter={8}>
          <Col>
            <Form.Item key={'cancelButton'} noStyle={true}>
              <Button key="back" onClick={() => {
                setOpen(false);
              }}>
                取消
              </Button>
            </Form.Item>
          </Col>
          <Col>
            <Form.Item key={'saveButton'} noStyle={true}>
              <Button key="submit" type="primary" loading={loading} htmlType="submit">
                保存
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default EditPromptModal;
