"use client";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useState } from "react";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { useUpdateUserForm } from "../hooks/useUpdateUserForm";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { DialogClose } from "@radix-ui/react-dialog";
import { PencilLine } from "lucide-react";
import Loading from "@/components/Loading";
import { User } from "@/server/user/domain/models";

interface UserSidebarProps {
  selectedUser: {
    userId: string;
    currentRol: any;
    email: string;
    firstName: string;
    lastName: string;
  };
  handleUpdateUser:(userList:User)=>void;
  users:User[]
}

const UpdateUserSidebar = ({ selectedUser,handleUpdateUser,users }: UserSidebarProps) => {
  const [open, setOpen] = useState(false);

  const { form, isInputChanged, isPending, handleSubmit } = useUpdateUserForm({
    selectedUser,
    onClose: () => setOpen(false),
    handleUpdateUser,
    users
  });


  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger>
        <button >
          <PencilLine size={20}/>
        </button>
      </DialogTrigger>
      <DialogContent className="max-w-[450px]">
        <DialogHeader>
          <DialogTitle>Editar usuario</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form
            className="space-y-5  "
            onSubmit={form.handleSubmit(handleSubmit)}
          >
            <FormField
              control={form.control}
              name="firstName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nombre</FormLabel>
                  <FormControl>
                    <Input placeholder="ej: Mario" {...field}  />
                  </FormControl>

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

            <FormField
              control={form.control}
              name="lastName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Apellido</FormLabel>
                  <FormControl>
                    <Input placeholder="ej: Rodriguez" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Correo</FormLabel>
                  <FormControl>
                    <Input placeholder="ej: Mario" {...field} />
                  </FormControl>

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

            <FormField
              control={form.control}
              name="rol"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Usuario</FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={field.value!}
                    name="rol"
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select a verified email to display" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="admin">admin</SelectItem>
                      <SelectItem value="moderator">moderator</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            <SheetFooter>
            <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline" size="sm">Cerrar</Button>
          </DialogClose>
        </DialogFooter>
              <Button  className="flex gap-1" size="sm" disabled={!isInputChanged || isPending} type="submit">
                {isPending ? "Guardando cambios" : "Guardar cambios"}
                {isPending && <Loading size={15}/>}
              </Button>
            
            </SheetFooter>
          </form>
        </Form>
    
      </DialogContent>
    </Dialog>
  );

  
};

export default UpdateUserSidebar;