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

'use client';

import Link from 'next/link';

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

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';

import { UpdateAccountSchema } from '../_lib/schemas/update-account.schema';
import { onUpdateAccount } from '../_lib/server/update-account';
import { z } from 'zod';

type UpdateAccountFormValues = z.infer<typeof UpdateAccountSchema>;

export function UpdateAccountForm({
  defaultValues,
}: {
  defaultValues: UpdateAccountFormValues,
}) {
  const form = useForm({
    resolver: zodResolver(UpdateAccountSchema),
    mode: 'onChange',
    defaultValues,
  });

  const { firstName, lastName, personalCode, email, weight, height, userConsent } = defaultValues;

  const hasFirstName = !!firstName;
  const hasLastName = !!lastName;
  const hasPersonalCode = !!personalCode;
  const hasEmail = !!email;
  const hasWeight = !!weight;
  const hasHeight = !!height;
  const hasUserConsent = !!userConsent;

  const onUpdateAccountOptions = async (values: UpdateAccountFormValues) =>
    onUpdateAccount({
      ...values,
      ...(hasFirstName && { firstName }),
      ...(hasLastName && { lastName }),
      ...(hasPersonalCode && { personalCode }),
      ...(hasEmail && { email }),
      ...(hasWeight && { weight: values.weight ?? weight }),
      ...(hasHeight && { height: values.height ?? height }),
      ...(hasUserConsent && { userConsent: values.userConsent ?? userConsent }),
    });

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

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

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

        <FormField
          name="email"
          disabled={hasEmail}
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:email'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </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>
  );
}