import {FC} from 'react';
import {Modal, ModalField} from '@components';
import ReactModal from 'react-modal';
import {useFormState} from './hooks';
import {Space} from 'antd';

const style: ReactModal.Styles = {
  content: {
    width: '560px',
    height: '500px',
  },
};

type Props = {
  visible: boolean,
  onClose: () => void,
  onFetch: () => void,
  id: string,
};

const MenuModal: FC<Props> = function({visible, onClose, id, onFetch}) {
  const [{control, isLoading}, onSubmit] = useFormState({
    onClose,
    id,
    visible,
    onFetch,
  });
  const isEdit = Boolean(id);

  return (
    <Modal
      visible={visible}
      title={`${isEdit ? '修改' : '新增'}菜单`}
      isLoading={isLoading}
      style={style}
      onSubmit={onSubmit}
      onClose={onClose}
    >
      <Space direction='vertical'>
        <ModalField
          name='menuName'
          width='300px'
          label='菜单名称'
          control={control}
        />
        <ModalField
          name='menuUrl'
          width='300px'
          label='菜单路径'
          control={control}
        />
        <ModalField
          name='menuOrderBy'
          width='300px'
          label='菜单排序'
          control={control}
          type='number'
        />
      </Space>
    </Modal>
  );
};

export default MenuModal;
