'use client';

import { useState, useRef, useEffect } from 'react';
import { Search } from 'lucide-react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { useRouter } from 'next/navigation';
import { Routes } from '@/config/routes';

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

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

export function HeaderSearch({ isDesktop = false }: { isDesktop?: boolean }) {
  const [searchOpen, setSearchOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const schema = useSchema();
  const router = useRouter();

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

  const onSubmit = () => {
    const formData = form.getValues();
    const search = formData.search;
    router.push(`${Routes.SEARCH}?s=${search}`);
  };

  // Manage focus when search opens/closes
  useEffect(() => {
    if (searchOpen) {
      inputRef.current?.focus();
    }
  }, [searchOpen]);

  // Close on Escape
  useEffect(() => {
    function handleEsc(e: KeyboardEvent) {
      if (e.key === 'Escape' && searchOpen) {
        setSearchOpen(false);
      }
    }
    document.addEventListener('keydown', handleEsc);
    return () => document.removeEventListener('keydown', handleEsc);
  }, [searchOpen]);

  if (isDesktop) {
    return (
      <div className='flex items-start gap-3'>
        {searchOpen && (
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className='w-40 md:w-60'
            >
              <FormField
                control={form.control}
                name='search'
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
                      <Input
                        {...field}
                        ref={inputRef}
                        className='h-8'
                        placeholder='søg'
                        autoComplete='off'
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </form>
          </Form>
        )}
        <button
          ref={buttonRef}
          className='hover:bg-unset hover:text-client-red flex size-min cursor-pointer items-center gap-2 p-0'
          aria-label='Open search'
          onClick={() => setSearchOpen(!searchOpen)}
        >
          <Search className='size-8 stroke-current' />

          {/* <svg
            version='1.1'
            id='Слой_1'
            xmlns='http://www.w3.org/2000/svg'
            x='0px'
            y='0px'
            viewBox='0 0 48 48'
            xmlSpace='preserve'
            className='size-8'
          >
            <circle fill='#CCCCCC' cx='24' cy='24' r='24' />
            <path
              fill='#FFFFFF'
              d='M19.7,29.2c2.5,0,4.7-0.9,6.5-2.3l10.6,10.6c0.3,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4
	c0.5-0.5,0.5-1.2,0-1.7L28,25.1c1.4-1.8,2.2-4,2.2-6.5c0-5.8-4.7-10.5-10.5-10.5c-5.8,0-10.5,4.7-10.5,10.5
	C9.2,24.5,13.9,29.2,19.7,29.2z M19.7,10.6c4.5,0,8,3.6,8,8s-3.6,8-8,8c-4.5,0-8-3.6-8-8S15.3,10.6,19.7,10.6z'
            />
          </svg> */}
          <span className='text-base font-medium text-current'>søg</span>
        </button>
      </div>
    );
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant='ghost'
          size='icon'
          className='hover:bg-unset hover:text-client-red size-min cursor-pointer p-0'
          aria-label='Open search'
        >
          <Search className='size-6 stroke-current md:size-8' />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        align='end'
        className='-mt-1 w-screen rounded-none border-0 border-b border-b-black p-8 shadow-none xl:w-lg xl:border-0 xl:p-0'
      >
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className='w-full space-y-6'
          >
            <FormField
              control={form.control}
              name='search'
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input {...field} placeholder='søg' autoComplete='off' />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </form>
        </Form>
      </PopoverContent>
    </Popover>
  );
}