'use client';
import React from 'react';
import { Text } from '@/components/ui/text';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import CommonImage from '@/components/common/CommonImage';
import { Button } from '@/components/ui/button';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
const typeList = [
  { value: 'General Task', label: 'General Task' },
  { value: 'Reminder', label: 'Reminder' },
  { value: 'Personal note', label: 'Personal note' },
];
interface WorkspaceEditProps {
  open: boolean;
  onOpenChange: (val: boolean) => void;
}
const WorkspaceFormSchema = z.object({
  Functional_Branch: z
    .array(z.string())
    .min(1, 'Functional Branch is required'),
  Task_Name: z
    .string()
    .min(1, 'Task Name is required')
    .max(50, 'Maximum 50 characters allowed'),
  Task_Details: z
    .string()
    .min(1, 'Task Details is required')
    .max(50, 'Maximum 50 characters allowed'),
  Type: z.string().min(1, 'Type is required'),
});
const WorkspaceEdit: React.FC<WorkspaceEditProps> = ({
  open,
  onOpenChange,
}) => {
  const defaultValues = {
    Type: '',
    Task_Name: '',
    Task_Details: '',
  };
  const WorkspaceForm = useForm<z.infer<typeof WorkspaceFormSchema>>({
    resolver: zodResolver(WorkspaceFormSchema),
    defaultValues,
  });
  const WorkspaceEditSubmit = async (
    data: z.infer<typeof WorkspaceFormSchema>,
  ) => {
    console.log('Form Data Submitted:', data);
  };
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        aria-describedby={undefined}
        className="modal-common-widget w-full max-w-7xl p-0 m-0"
      >
        <DialogTitle className="p-5 modal-header">
          Edit → Personal Tasks
        </DialogTitle>
        <Form {...WorkspaceForm}>
          <form
            onSubmit={WorkspaceForm.handleSubmit(WorkspaceEditSubmit)}
            className="space-y-6"
          >
            <Text className="main-scroll-widget">
              <Text className="flex flex-wrap p-2 form-mid mt-0">
                <Text className="w-full">
                  <FormField
                    control={WorkspaceForm.control}
                    name="Type"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold rounded-full">
                          Type
                        </FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          value={field.value}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Type" />
                          </SelectTrigger>
                          <SelectContent className="z-[9999]">
                            {typeList.map((option) => (
                              <SelectItem
                                key={option.value}
                                value={option.value}
                              >
                                {option.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </Text>
                <FormField
                  control={WorkspaceForm.control}
                  name="Task_Name"
                  render={({ field }) => (
                    <FormItem className="w-full p-2">
                      <FormLabel className="no-error-styles font-bold">
                        Task Name
                      </FormLabel>
                      <FormControl>
                        <Input
                          className="rounded-full border-gray-600 shadow-none"
                          placeholder="Task Name"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={WorkspaceForm.control}
                  name="Task_Details"
                  render={({ field }) => (
                    <FormItem className="w-full p-2">
                      <FormLabel className="no-error-styles font-bold">
                        Task Details{' '}
                        <Text
                          className="label-span"
                          size={'sm'}
                          variant={'span'}
                        >
                          Entered Characters : 10 - 500 characters
                        </Text>
                      </FormLabel>
                      <FormControl>
                        <Textarea
                          className="py-1 mt-3 rounded-3xl p-4 pl-6 pr-6 border-gray-600 h-24"
                          placeholder="Task Name"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <Text className="upload-img-count w-full p-2 m-2 bg-gray-100">
                  0/5 documents uploaded
                </Text>
                <Text className="w-full max-w-sm items-center p-2">
                  <Label className="py-1 font-bold" htmlFor="picture">
                    Support Documents{' '}
                    <Text className="label-span" size={'sm'} variant={'span'}>
                      (Allowed: jpg,png,jpeg,pdf,webp)
                    </Text>
                  </Label>
                  <Input
                    id="picture"
                    type="file"
                    className="rounded-full border-gray-600 mt-3 shadow-none"
                  />
                </Text>
              </Text>
            </Text>
            <Text className="modal-footer flex justify-end items-end footer-modal text-right gap-2 m-0 pr-4 p-2">
              <Button
                type="button"
                className="m-0 refresh-btn bg-transparent shadow primary-button-refresh"
              >
                <CommonImage
                  src="/main/refresh-icn.webp"
                  width={15}
                  height={15}
                  alt="refresh"
                  classname="refresh-icon"
                />
              </Button>
              <Button
                type="submit"
                className="m-0 filter-search-btn tracking-wider w-40 primary-button"
              >
                Update
              </Button>
            </Text>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
};
export default WorkspaceEdit;