"use client";


import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

const items = [
  { id: 'recents', label: 'Recents' },
  { id: 'home', label: 'Home' },
  { id: 'applications', label: 'Applications' },
  { id: 'desktop', label: 'Desktop' },
  { id: 'downloads', label: 'Downloads' },
  { id: 'documents', label: 'Documents' },
];

const displayFormSchema = z.object({
  items: z.array(z.string()).refine((value) => value.some((item) => item), {
    message: "You have to select at least one item.",
  }),
});

type DisplayFormValues = z.infer<typeof displayFormSchema>;

const defaultValues: Partial<DisplayFormValues> = {
  items: ['recents', 'home'],
};

export function DisplayForm() {
  const { control, handleSubmit } = useForm<DisplayFormValues>({
    resolver: zodResolver(displayFormSchema),
    defaultValues,
  });

  const onSubmit = (data: DisplayFormValues) => {
    console.log(JSON.stringify(data, null, 2));
  };

  return (
    <div>
      <h3 className="text-sm font-medium mb-2">Sidebar</h3>
      <p className="text-sm text-gray-500 mb-4">
        Select the items you want to display in the sidebar.
      </p>
      {items.map((item) => (
        <Controller
          key={item.id}
          control={control}
          name="items"
          render={({ field }) => (
            <div className="flex items-center mb-3">
              <input
                type="checkbox"
                id={item.id}
                checked={field.value?.includes(item.id)}
                onChange={(e) => {
                  const updatedValue = e.target.checked
                    ? [...field.value, item.id]
                    : field.value?.filter((value) => value !== item.id);
                  field.onChange(updatedValue);
                }}
                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <label htmlFor={item.id} className="ml-2 text-sm">
                {item.label}
              </label>
            </div>
          )}
        />
      ))}
      <button
        className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
        onClick={handleSubmit(onSubmit)}
      >
        Update display
      </button>
    </div>
  );
}