medreport_mrb2b/app/auth/update-account/_components/update-account-form.tsx

'use client';

import Link from 'next/link';

import { User } from '@supabase/supabase-js';

import { ExternalLink } from '@/public/assets/external-link';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';

import { onUpdateAccount } from '@kit/auth/actions/update-account-actions';
import { UpdateAccountSchema } from '@kit/auth/schemas/update-account.schema';
import { Button } from '@kit/ui/button';
import { Checkbox } from '@kit/ui/checkbox';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';

export function UpdateAccountForm({ user }: { user: User }) {
  const form = useForm({
    resolver: zodResolver(UpdateAccountSchema),
    mode: 'onChange',
    defaultValues: {
      firstName: '',
      lastName: '',
      personalCode: user.user_metadata.personalCode ?? '',
      email: user.email,
      phone: '',
      city: '',
      weight: user.user_metadata.weight ?? undefined,
      height: user.user_metadata.height ?? undefined,
      userConsent: false,
    },
  });

  return (
    <Form {...form}>
      <form
        className="flex flex-col gap-6 px-6 pt-10 text-left"
        onSubmit={form.handleSubmit(onUpdateAccount)}
      >
        <FormField
          name="firstName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:firstName'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="lastName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:lastName'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="personalCode"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:personalCode'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:email'} />
              </FormLabel>
              <FormControl>
                <Input {...field} disabled />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="phone"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:phone'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="city"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:city'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <div className="flex flex-row justify-between gap-4">
          <FormField
            name="weight"
            render={({ field }) => (
              <FormItem>
                <FormLabel>
                  <Trans i18nKey={'common:formField:weight'} />
                </FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="kg"
                    {...field}
                    value={field.value ?? ''}
                    onChange={(e) =>
                      field.onChange(
                        e.target.value === '' ? null : Number(e.target.value),
                      )
                    }
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            name="height"
            render={({ field }) => (
              <FormItem>
                <FormLabel>
                  <Trans i18nKey={'common:formField:height'} />
                </FormLabel>
                <FormControl>
                  <Input
                    placeholder="cm"
                    type="number"
                    {...field}
                    value={field.value ?? ''}
                    onChange={(e) =>
                      field.onChange(
                        e.target.value === '' ? null : Number(e.target.value),
                      )
                    }
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <FormField
          name="userConsent"
          render={({ field }) => (
            <FormItem>
              <div className="flex flex-row items-center gap-2 pb-1">
                <FormControl>
                  <Checkbox
                    checked={field.value}
                    onCheckedChange={field.onChange}
                  />
                </FormControl>
                <FormLabel>
                  <Trans i18nKey={'account:updateAccount:userConsentLabel'} />
                </FormLabel>
              </div>

              <Link
                href={''}
                className="flex flex-row items-center gap-2 text-sm hover:underline"
                target="_blank"
              >
                <ExternalLink />
                <Trans i18nKey={'account:updateAccount:userConsentUrlTitle'} />
              </Link>
            </FormItem>
          )}
        />

        <Button disabled={form.formState.isSubmitting} type="submit">
          <Trans i18nKey={'account:updateAccount:button'} />
        </Button>
      </form>
    </Form>
  );
}