import {FC} from 'react';
import {useFetchUserInfo, useField} from './hooks';
import {ModalField, ModalSelect} from '@components';
import {useDictionaryOptions, useRoleOptions} from '@hooks';

type Props = {
  id: string;
};

const UserModalInfo: FC<Props> = function ({id}) {
  const {data: roleOptions} = useRoleOptions();
  const {data: departmentOptions, isFetching: isDepartmentFetching} =
    useDictionaryOptions('部门字典', false, state => state.code);
  const {control} = useField();
  useFetchUserInfo(id);

  return (
    <>
      <ModalField control={control} name='userName' label='工号' />
      <ModalField control={control} name='userRealName' label='姓名' />
      <ModalField
        control={control}
        name='userPassword'
        label='用户密码'
        type='password'
        disabled={Boolean(id)}
      />
      <ModalSelect
        control={control}
        name='userDepartment'
        label='部门'
        data={departmentOptions}
        showSearch
        loading={isDepartmentFetching}
      />
      <ModalSelect
        control={control}
        name='userRole'
        label='角色'
        data={roleOptions}
      />
      <ModalField
        control={control}
        name='userEmail'
        label='邮箱'
        type='email'
        required={false}
      />
      <ModalField
        control={control}
        name='userPhone'
        label='手机'
        type='phone'
        required={false}
      />
    </>
  );
};

export default UserModalInfo;
