import {FieldValues, SubmitHandler, UseFormReturn} from 'react-hook-form';
import clsx from 'clsx';
import {ReactNode} from 'react';
import {Link} from 'react-router-dom';
import {useValueLists} from '../../http/value-lists';
import {FormTextField} from '../../ui/forms/input-field/text-field/text-field';
import {FormSwitch} from '../../ui/forms/toggle/switch';
import {FormFileSizeField} from '../../ui/forms/input-field/file-size-field';
import {LinkStyle} from '../../ui/buttons/external-link';
import {FormPermissionSelector} from '../../auth/ui/permission-selector';
import {Trans} from '../../i18n/trans';
import {FormChipField} from '../../ui/forms/input-field/chip-field/form-chip-field';
import {Item} from '../../ui/forms/listbox/item';
import {CrupdateResourceLayout} from '../crupdate-resource-layout';
import {useSettings} from '../../core/settings/use-settings';
interface Props<T extends FieldValues> {
onSubmit: SubmitHandler<T>;
form: UseFormReturn<T>;
title: ReactNode;
subTitle?: ReactNode;
isLoading: boolean;
avatarManager: ReactNode;
resendEmailButton?: ReactNode;
children?: ReactNode;
}
export function CrupdateUserForm<T extends FieldValues>({
onSubmit,
form,
title,
subTitle,
isLoading,
avatarManager,
resendEmailButton,
children,
}: Props<T>) {
const {require_email_confirmation} = useSettings();
const {data: valueLists} = useValueLists(['roles', 'permissions']);
return (
<CrupdateResourceLayout
onSubmit={onSubmit}
form={form}
title={title}
subTitle={subTitle}
isLoading={isLoading}
>
<div className="mb-40 flex items-start gap-40 md:gap-80">
{avatarManager}
<div className="flex-auto">
{children}
<FormTextField
className="mb-30"
name="first_name"
label={<Trans message="First name" />}
/>
<FormTextField
name="last_name"
label={<Trans message="Last name" />}
/>
</div>
</div>
<div className="mb-30 border-b border-t pb-30 pt-30">
<FormSwitch
className={clsx(resendEmailButton && 'mb-30')}
disabled={!require_email_confirmation}
name="email_verified_at"
description={
<Trans message="Whether email address has been confirmed. User will not be able to login until address is confirmed, unless confirmation is disabled from settings page." />
}
>
<Trans message="Email confirmed" />
</FormSwitch>
{resendEmailButton}
</div>
<FormFileSizeField
className="mb-30"
name="available_space"
label={<Trans message="Allowed storage space" />}
description={
<Trans
values={{
a: parts => (
<Link
className={LinkStyle}
target="_blank"
to="/admin/settings/uploading"
>
{parts}
</Link>
),
}}
message="Total storage space all user uploads are allowed to take up. If left empty, this value will be inherited from any roles or subscriptions user has, or from 'Available space' setting in <a>Uploading</a> settings page."
/>
}
/>
<FormChipField
className="mb-30"
name="roles"
label={<Trans message="Roles" />}
suggestions={valueLists?.roles}
>
{chip => (
<Item key={chip.id} value={chip.id}>
{chip.name}
</Item>
)}
</FormChipField>
<div className="mt-30 border-t pt-30">
<div className="mb-10 text-sm">
<Trans message="Permissions" />
</div>
<FormPermissionSelector name="permissions" />
</div>
</CrupdateResourceLayout>
);
}