"use client";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  SheetFooter,
  SheetClose,
} from "@/components/ui/sheet";
import { MdModeEdit } from "react-icons/md";
import { trpc } from "@/app/_trpc/client";
import { useEffect, useMemo, useState } from "react";
import { useToast } from "../ui/use-toast";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "../ui/form";
import { z } from "zod";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import {
  addLocalOffsetFromDate,
  cn,
  formatDate,
} from "@/lib/utils";
import { CalendarIcon } from "lucide-react";
import { Calendar } from "../ui/calendar";
import moment from "moment";
import useFormHandler from "@/hooks/useFormHandler";
import { updateTaskSchema } from "@/lib/schemas/taskSchema";
import { Task, taskStatus, TaskStatus } from "@/server/task/domain/models";

const STATUS_ENUM = taskStatus

const STATUS_ENUM_EMPLOYEE = ["no iniciada", "en proceso", "completada"];



const ModifyTaskSidebar = ({
  selectedTask,
  isEmployeeEdit,
}: {
  selectedTask: Task;
  isEmployeeEdit?: boolean;
}) => {
  const utils = trpc.useUtils();
  const { toast } = useToast();
  const [open, setOpen] = useState<boolean>(false);

  const defaultValues: z.infer<typeof updateTaskSchema> = {
    id: '',
    status: "no iniciada",
    userId: "",
    priority: "baja",
    startDate: undefined,
    expireDate: undefined,
  };

  const { form, isInputChanged, setIsInputChanged,getChangedFields } = useFormHandler(
    updateTaskSchema,
    defaultValues
  );

  const { data: users, isPending: isPendingUsers } =
    trpc.users.getUsers.useQuery();

  useEffect(() => {
    if (selectedTask) {
       form.reset({
        projectId: selectedTask?.projectId,
        projectName: selectedTask?.projectName,
        areaName: selectedTask?.areaName,
        areaId: selectedTask?.areaId,
        floorName: selectedTask?.floorName,
        priority: selectedTask?.priority,
        status: selectedTask?.status,
        userId: selectedTask?.user?.id,
        id: selectedTask?.id,
        startDate:
          selectedTask?.startDate > formatDate(new Date())!
            ? selectedTask?.startDate
            : undefined,
        expireDate:
          selectedTask?.expireDate &&
          selectedTask.startDate > formatDate(new Date())!
            ? selectedTask?.expireDate
            : undefined,
      })
    }
  }, [selectedTask, form]);

  const { mutate: updateTaskMutation, isPending } = trpc.tasks.updateTask.useMutation({
    onSuccess: () => {
      setOpen(false);
      utils.tasks.getProjectTasks.invalidate();
      utils.tasks.getRecentModifiedTasks.invalidate();
      if (isEmployeeEdit) {
        utils.users.getUserActiveTasks.invalidate();
        utils.tasks.getTasks.invalidate()
        utils.users.getUserMonthActivity.invalidate()
      }
      // invalidar projecto a la que pertenece tarea
      if (selectedTask?.projectId) {
        utils.projects.getProjectById.invalidate({value:selectedTask?.projectId});
      }
      toast({
        title: "Exito",
        description: "Tarea actualizada con exito",
        variant: "default",
      });
      setIsInputChanged(false);
    },
    onError: (opts) => {
      toast({
        title: "Error",
        description: opts?.message,
        variant: "destructive",
      });
    },
  });

  function onSubmit(values: z.infer<typeof updateTaskSchema>) {
    const changedFields = getChangedFields(values)
    updateTaskMutation({
      id:values.id,
      projectName:values.projectName,
      floorName:values.floorName,
      areaName:values.areaName,
      areaId:values.areaId,
      ...changedFields
    });
  }


  const enumPriorityByRol = useMemo(() => {
    return isEmployeeEdit ? STATUS_ENUM_EMPLOYEE : STATUS_ENUM;
  }, [isEmployeeEdit]);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger>
        {isEmployeeEdit ? (
          <span className="text-2xl text-right font-bold">...</span>
        ) : (
          <MdModeEdit className="text-2xl text-blue-800 " />
        )}
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Editar tarea</SheetTitle>
          <SheetDescription>Modificar tarea asignada</SheetDescription>
        </SheetHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <div className="grid gap-4 py-4 mt-10">
              {!isEmployeeEdit ? (
                <>
                  <FormField
                    control={form.control}
                    name="userId"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Usuario asignado</FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select a verified email to display" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            {users &&
                              users.length > 0 &&
                              users?.map((user) => (
                                <SelectItem key={user?.id} value={user?.id}>
                                  {user?.firstName}
                                </SelectItem>
                              ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  
                  <FormField
                    control={form.control}
                    name="startDate"
                    render={({ field }) => (
                      <FormItem className="flex flex-col">
                        <FormLabel>Fecha de inicio</FormLabel>
                        <Popover>
                          <PopoverTrigger asChild>
                            <FormControl>
                              <Button
                                variant={"outline"}
                                className={cn(
                                  " pl-3 text-left font-normal w-full",
                                  !field.value && "text-muted-foreground"
                                )}
                              >
                                {field.value ? (
                                  moment(field.value).format("DD  MMM  YYYY")
                                ) : (
                                  <span>Escoje una fecha</span>
                                )}
                                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                              </Button>
                            </FormControl>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            <Calendar
                              mode="single"
                              selected={addLocalOffsetFromDate(field.value!)}
                              onSelect={(value) =>
                                field.onChange(formatDate(value))
                              }
                            />
                          </PopoverContent>
                        </Popover>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="expireDate"
                    render={({ field }) => (
                      <FormItem className="flex flex-col">
                        <FormLabel>Fecha de expiracion</FormLabel>
                        <Popover>
                          <PopoverTrigger asChild>
                            <FormControl>
                              <Button
                                variant={"outline"}
                                className={cn(
                                  " pl-3 text-left font-normal w-full",
                                  !field.value && "text-muted-foreground"
                                )}
                              >
                                {field.value ? (
                                  moment(field.value).format("DD  MMM  YYYY")
                                ) : (
                                  <span>Escoje una fecha</span>
                                )}
                                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                              </Button>
                            </FormControl>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            <Calendar
                              mode="single"
                              selected={addLocalOffsetFromDate(field.value!)}
                              onSelect={(value) =>
                                field.onChange(formatDate(value))
                              }
                            />
                          </PopoverContent>
                        </Popover>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="priority"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Prioridad</FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select a verified email to display" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            {["baja", "media", "alta"].map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>

                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </>
              ) : null}

              <FormField
                control={form.control}
                name="status"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Estado</FormLabel>
                    <FormControl>
                      <Select
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Select a priority" />
                        </SelectTrigger>
                        <SelectContent>
                          {enumPriorityByRol.map((option) => (
                            <SelectItem key={option} value={option}>
                              {option}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </FormControl>

                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <SheetFooter>
              <Button disabled={!isInputChanged || isPending} type="submit">
                {isPending ? "Guardando cambios..." : "Guardar cambios"}
              </Button>
            </SheetFooter>
          </form>
        </Form>

        <SheetFooter>
          <SheetClose asChild></SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
};

export default ModifyTaskSidebar;