import {useForm} from 'react-hook-form';
import React from 'react';
import {FormTextField} from '../../ui/forms/input-field/text-field/text-field';
import {CreateUserPayload, useCreateUser} from './requests/create-user';
import {CrupdateUserForm} from './crupdate-user-form';
import {FileUploadProvider} from '../../uploads/uploader/file-upload-provider';
import {Trans} from '../../i18n/trans';
import {FormImageSelector} from '@common/ui/images/image-selector';

export function CreateUserPage() {
  const form = useForm<CreateUserPayload>();
  const createUser = useCreateUser(form);

  const avatarManager = (
    <FileUploadProvider>
      <FormImageSelector
        name="avatar"
        diskPrefix="avatars"
        variant="avatar"
        stretchPreview
        label={<Trans message="Profile image" />}
        previewSize="w-90 h-90"
        showRemoveButton
      />
    </FileUploadProvider>
  );

  return (
    <CrupdateUserForm
      onSubmit={newValues => {
        createUser.mutate(newValues);
      }}
      form={form}
      title={<Trans message="Add new user" />}
      isLoading={createUser.isPending}
      avatarManager={avatarManager}
    >
      <FormTextField
        className="mb-30"
        name="email"
        type="email"
        label={<Trans message="Email" />}
      />
      <FormTextField
        className="mb-30"
        name="password"
        type="password"
        label={<Trans message="Password" />}
      />
    </CrupdateUserForm>
  );
}