import {FC} from 'react';
import {Control} from 'react-hook-form';
import {FormState, useFetchUserInfo, useOptions} from './hooks';
import {ModalBtnGroup, ModalField, ModalSelect} from '@components';
import {Space} from 'antd';

type Props = {
  control: Control<FormState>,
  isLoading: boolean,
  id: string;
  onClose: () => void,
};

const width = '350px';

const UserModalInfo: FC<Props> = function({control, onClose, isLoading, id}) {
  const {roleOptions, departmentOptions} = useOptions();
  useFetchUserInfo(id);

  return (
    <Space direction='vertical'>
      <ModalField
        control={control}
        name='userName'
        label='用户名'
        width={width}
      />
      <ModalField
        control={control}
        name='userPassword'
        label='用户密码'
        width={width}
        type='password'
        disabled={Boolean(id.length)}
      />
      <ModalField
        control={control}
        name='userRealName'
        label='真实姓名'
        width={width}
      />
      <ModalField
        control={control}
        name='userEmail'
        label='邮箱'
        width={width}
        type='email'
      />
      <ModalField
        control={control}
        name='userLandline'
        label='电话'
        width={width}
        type='phone'
      />
      <ModalField
        control={control}
        name='userPhone'
        label='手机'
        width={width}
        type='phone'
      />
      <ModalSelect
        control={control}
        name='userDepartment'
        label='部门'
        width={width}
        data={departmentOptions}
      />
      <ModalSelect
        control={control}
        name='userRole'
        label='角色'
        data={roleOptions}
        width={width}
      />

      <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
    </Space>
  );
};

export default UserModalInfo;
