import Modal from 'antd/es/modal/Modal';
import Form, { useForm } from 'antd/es/form/Form';
import FormItem from 'antd/es/form/FormItem';
import Input from 'antd/es/input';
import { useEffect } from 'react';

type CodeDescModalProps = {
  open: boolean;
  onClose: () => void;
  onSubmit?: (values: { title: string; description: string }) => void;
  initialValues?: { title: string; description: string };
};
export const CodeDescModal = (props: CodeDescModalProps) => {
  const [form] = useForm();
  useEffect(() => {
    if (!props.open) {
      return;
    }
    if (props.initialValues) {
      form.setFieldsValue(props.initialValues || { title: '', description: '' });
    }
  }, [props.open, props.initialValues, form]);
  return (
    <Modal title='代码描述' open={props.open} onCancel={props.onClose} footer={null}>
      <p className='text-gray-500 text-sm mb-4'>登陆用户的数据长存，非登陆的用户，保留30天自动删除。</p>
      <Form form={form} layout='vertical'>
        <FormItem label='标题' name='title'>
          <Input />
        </FormItem>
        <FormItem label='描述' name='description'>
          <Input.TextArea rows={4} />
        </FormItem>
      </Form>
      <div className='flex justify-end mt-4'>
        <button
          className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 cursor-pointer'
          onClick={() => {
            form.validateFields().then((values) => {
              props.onSubmit?.(values);
              props.onClose();
            });
          }}>
          提交
        </button>
        <button className='ml-2 px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 cursor-pointer' onClick={props.onClose}>
          取消
        </button>
      </div>
    </Modal>
  );
};
