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

const modalStyle: ReactModal.Styles = {
  content: {width: '520px', height: '420px'},
};

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

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

  return (
    <Modal
      visible={visible}
      style={modalStyle}
      title={`${id.length ? '修改' : '新增'}角色`}
      onClose={onClose}
      isLoading={isLoading}
      onSubmit={onSubmit}
      testId='role_modal'
    >
      <Space direction='vertical'>
        <ModalField
          name='roleName'
          width='300px'
          label='角色名'
          control={control}
        />
        <ModalTextArea
          name='roleRemarks'
          width='300px'
          height='80px'
          label='备注'
          control={control}
        />
      </Space>
    </Modal>
  );
};

export default RoleModal;
