import { useForm } from 'react-hook-form';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from '../ui/dialog';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '../ui/form';
import { Text } from '../ui/text';
import CommonImage from './CommonImage';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../ui/select';
import { Checkbox } from '../ui/checkbox';
import { Button } from '../ui/button';
import { TableProps, UnknownRecord } from '@/types';
interface TableSettingsProps {
  bucket: TableProps;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  columns: UnknownRecord[];
  recordsPerPage: number;
  heading: string;
}
const FormSchema = z.object({
  items: z.array(z.string()).refine((value) => value.length > 0, {
    message: 'You have to select at least one item.',
  }),
  RecordsPage: z.string().min(1, { message: 'Select number of records' }),
});
const TableSettings = ({
  columns,
  recordsPerPage,
  heading,
}: TableSettingsProps) => {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      items: ['Emp Code', 'Name'],
      RecordsPage: '10',
    },
  });

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Text
          title="Setting icon"
          className="setting-icn wo-fts-filter-bts flex justify-content items-start"
        >
          <CommonImage
            src="/main/setting-icn.webp"
            width={20}
            height={20}
            alt="Setting icon"
            classname="setting-icon"
          />
        </Text>
      </DialogTrigger>
      <DialogContent className="w-full max-w-7xl p-0 m-0 table-modal-settings modal-common-widget">
        <DialogTitle className="p-5 modal-header">
          Table Settings - {heading}
        </DialogTitle>
        <DialogDescription className="px-5 text-sm text-muted-foreground">
          {''}
        </DialogDescription>
        <Form {...form}>
          <form className="space-y-8">
            <Text className="main-scroll-widget p-5">
              {/* Records Per Page */}
              <FormField
                control={form.control}
                name="RecordsPage"
                render={({ field }) => (
                  <FormItem className="w-1/4 p-2 records-page-number flex justify-center items-center">
                    <FormLabel>Number of records per page?</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={String(recordsPerPage)}
                      value={String(recordsPerPage)}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="10" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="10">10</SelectItem>
                        <SelectItem value="50">50</SelectItem>
                        <SelectItem value="100">100</SelectItem>
                        <SelectItem value="500">500</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {/* Columns with Select All */}
              <FormField
                control={form.control}
                name="items"
                render={() => (
                  <>
                    <Text className="flex flex-Show justify-between mb-2">
                      <Text>Show the Following Columns</Text>
                      <Text className="select-all-check flex gap-2">
                        <Checkbox id="select-all" checked={true} />
                        <FormLabel
                          htmlFor="select-all"
                          className="text-sm font-normal cursor-pointer"
                        >
                          Select All
                        </FormLabel>
                      </Text>
                    </Text>
                    <FormMessage className="mb-2 text-red-500" />
                    <FormItem className="flex flex-wrap space-y-0 all-columns-widget">
                      {columns?.map((column) => (
                        <FormField
                          key={column.key}
                          control={form.control}
                          name="items"
                          render={() => (
                            <FormItem className="flex flex-row items-start space-x-3 space-y-0 w-2/6 p-2 m-0">
                              <Text className="checkbox-widget flex justify-between p-0 cursor-pointer">
                                <FormLabel className="text-sm font-normal cursor-pointer">
                                  {column.title}
                                </FormLabel>
                                <FormControl>
                                  <Checkbox
                                    checked={
                                      column.is_checked === 'true'
                                        ? true
                                        : Boolean(column.is_checked)
                                    }
                                  />
                                </FormControl>
                              </Text>
                            </FormItem>
                          )}
                        />
                      ))}
                    </FormItem>
                  </>
                )}
              />
            </Text>
            <Text className="modal-footer flex justify-end items-end footer-modal text-right gap-2 m-0 pr-4 p-2">
              <Button
                className="m-0 filter-search-btn tracking-wider w-40 primary-button"
                type="button"
              >
                Reset Settings
              </Button>
              <Button
                className="m-0 filter-search-btn tracking-wider w-40 primary-button"
                type="submit"
              >
                Save Settings
              </Button>
            </Text>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
};
export default TableSettings;