'use client';

import { useTransition } from 'react';
import { Loader2 } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage
} from '@/components/ui/form';

function useSchema() {
  return z.object({
    bill: z.coerce
      .number()
      .min(20, {
        message:
          'Hvor meget kan du undvære, uden det går for hårdt ud over husholdningen? Indtast venligst beløb (min. 20 kr.)'
      })
      .int('Must be an integer')
  });
}

type SupportFormData = z.infer<ReturnType<typeof useSchema>>;

export default function SupportForm() {
  const [loading, startTransition] = useTransition();
  const schema = useSchema();

  const form = useForm<SupportFormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      bill: 0
    }
  });

  const onSubmit = () => {
    startTransition(async () => {
      // Handle support form submission
    });
  };

  return (
    <div className='h-full w-full bg-neutral-100 pb-5 md:max-w-74'>
      <h6 className='bg-neutral-600 p-4 text-lg font-bold text-white'>
        VisaDankort / kreditkort
      </h6>

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <FormField
            control={form.control}
            name='bill'
            render={({ field }) => (
              <FormItem className='my-5'>
                <FormControl>
                  <div className='flex items-end justify-center gap-2 text-4xl font-bold text-neutral-400'>
                    kr
                    <Input
                      id='bill'
                      type='number'
                      className='min-h-17 max-w-34 [appearance:textfield] bg-white text-right !text-4xl shadow-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
                      {...field}
                    />
                    ,-
                  </div>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button
            type='submit'
            className='bg-client-red hover:bg-client-red/80 mb-5 h-auto rounded-sm px-8 py-3 text-lg leading-none font-bold text-white transition'
            disabled={loading}
          >
            {loading ? <Loader2 className='animate-spin' /> : 'Videre'}
          </Button>
        </form>
      </Form>

      <p className='mx-auto text-sm font-bold text-neutral-500'>
        (betalingsvindue åbner)
      </p>
    </div>
  );
}