import {Modal, ModalField} from '@components';
import {FC} from 'react';
import {useFormState} from './hooks';

type Props = {
  visible: boolean;
  onClose: () => void;
};

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

  return (
    <Modal
      visible={visible}
      title='修改密码'
      onSubmit={onSubmit}
      onClose={onClose}
      testId='edit_password_modal'
      height='500px'
      isLoading={isLoading}
    >
      <ModalField
        control={control}
        name='oldPassword'
        label='旧密码'
        type='password'
      />
      <ModalField
        control={control}
        name='newPassword'
        label='新密码'
        type='password'
      />
      <ModalField
        control={control}
        name='repeatPassword'
        label='重复新密码'
        type='password'
      />
    </Modal>
  );
};

export default PassModal;
