'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 { UpdateAccountSchemaClient } from '../_lib/schemas/update-account.schema';
import { onUpdateAccount } from '../_lib/server/update-account';
import { z } from 'zod';

type UpdateAccountFormValues = z.infer<typeof UpdateAccountSchemaClient>;

export function UpdateAccountForm({
  defaultValues,
  isEmailUser,
}: {
  defaultValues: UpdateAccountFormValues,
  isEmailUser: boolean,
}) {
  const form = useForm({
    resolver: zodResolver(UpdateAccountSchemaClient),
    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 onUpdateAccountOptions = async (values: UpdateAccountFormValues) =>
    onUpdateAccount({
      firstName: hasFirstName ? firstName : values.firstName,
      lastName: hasLastName ? lastName : values.lastName,
      personalCode: hasPersonalCode ? personalCode : values.personalCode,
      email: hasEmail ? email : values.email,
      phone: values.phone,
      weight: (hasWeight ? weight : values.weight) as number,
      height: (hasHeight ? height : values.height) as number,
      userConsent: values.userConsent ?? userConsent,
      city: values.city,
    });

  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 && !isEmailUser}
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:firstName'} />
              </FormLabel>
              <FormControl>
                <Input {...field} autoFocus={!hasFirstName} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

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

        <FormField
          name="personalCode"
          disabled={hasPersonalCode && !isEmailUser}
          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>
          )}
        />

        {!isEmailUser && (
          <>
            <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>
  );
}