'use client';

import React, { useEffect, useMemo } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form';
import { Checkbox } from '@/components/ui/checkbox';
import { checkboxOptions } from '../_constants/map-options';
import { Routes } from '@/config/routes';

const schema = z
  .object({
    filters: z.array(z.string())
  })
  .refine((data) => data.filters.length > 0, {
    path: ['filters']
  });

type FilterFormValues = z.infer<typeof schema>;

export default function Filters() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const defaultValues = useMemo<FilterFormValues>(() => {
    const query = searchParams?.get('filters');
    const filters = query
      ? query.split(',')
      : checkboxOptions.map((option) => option.id);
    return { filters };
  }, [searchParams]);

  const form = useForm<FilterFormValues>({
    resolver: zodResolver(schema),
    defaultValues,
    mode: 'onChange'
  });

  useEffect(() => {
    const subscription = form.watch((values) => {
      const current = values.filters;
      if (!current?.length) return;
      const params = new URLSearchParams(searchParams?.toString());

      if (current.length === checkboxOptions.length) {
        params.delete('filters');
      } else {
        params.set('filters', current.join(','));
      }

      const queryString = params.toString();
      const pathname =
        typeof window !== 'undefined' ? window.location.pathname : Routes.HOME;
      const nextUrl = queryString ? `${pathname}?${queryString}` : pathname;
      router.replace(nextUrl, { scroll: false });
    });

    return () => subscription.unsubscribe();
  }, [form, router, searchParams]);

  return (
    <div className='bg-neutral-800 p-4 text-white'>
      <p className='mb-2 text-[10px] leading-none uppercase'>VIS</p>
      <Form {...form}>
        <form
          onSubmit={(e) => e.preventDefault()}
          className='flex flex-wrap gap-5'
        >
          {checkboxOptions.map((option) => (
            <FormField
              key={option.id}
              control={form.control}
              name='filters'
              render={({ field }) => {
                const isChecked = field.value?.includes(option.id);
                return (
                  <FormItem key={option.id} className='flex items-center gap-1'>
                    <FormControl>
                      <Checkbox
                        className='data-[state=checked]:border-white data-[state=checked]:bg-neutral-800 data-[state=checked]:text-white'
                        checked={isChecked}
                        onCheckedChange={(checked) => {
                          const newValues = checked
                            ? [...field.value, option.id]
                            : field.value.filter(
                                (value) => value !== option.id
                              );
                          if (!newValues.length) return;

                          field.onChange(newValues);
                        }}
                      />
                    </FormControl>
                    <FormLabel className='font-medium'>
                      {option.label}
                    </FormLabel>
                    <FormMessage />
                  </FormItem>
                );
              }}
            />
          ))}
        </form>
      </Form>
    </div>
  );
}