import {FC} from 'react';
import {ModalField, Modal as ModalComponent} from '@components';
import ReacatModal from 'react-modal';
import {useFormState} from './hooks';

const modalStyle: ReacatModal.Styles = {
  content: {width: '460px', height: '300px'},
};

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

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

  return (
    <ModalComponent
      visible={visible}
      style={modalStyle}
      title={`${isEdit ? '修改' : '新增'}部门`}
      onClose={onClose}
      onSubmit={onSubmit}
      isLoading={isLoading}
      testId='department_modal'
    >
      <ModalField
        name='departmentName'
        width='300px'
        label='部门名称'
        control={control}
      />
    </ModalComponent>

  );
};

export default Modal;
