'use client';

import { FC } from 'react';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Routes } from '@/config/routes';
import { useRouter } from 'next/navigation';
import { Search } from 'lucide-react';

function useSchema() {
  return z.object({
    search: z.string().min(1, { message: 'Dette felt er påkrævet' })
  });
}

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

interface Props {
  initialSearch?: string;
}

const SearchHeaderField: FC<Props> = ({ initialSearch }) => {
  const schema = useSchema();
  const { push } = useRouter();

  const form = useForm<SearchFormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      search: initialSearch || ''
    }
  });

  const onSubmit = (data: SearchFormData) => {
    push(`${Routes.SEARCH}?s=${data.search}`);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className='w-full'>
        <FormField
          control={form.control}
          name='search'
          render={({ field }) => (
            <FormItem>
              <FormControl>
                <div className='relative'>
                  <Search className='absolute top-[14px] left-3 z-10 size-5 stroke-current' />
                  <Input
                    {...field}
                    className='h-12 rounded-none pl-11 shadow-none'
                    placeholder='søg efter ...'
                    autoComplete='off'
                  />
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  );
};

export default SearchHeaderField;