import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  cn,
} from "@/lib/utils";
import React, { useState } from "react";

import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { FaPlus } from "react-icons/fa";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import moment from "moment";
import { CalendarIcon } from "lucide-react";
import Loading from "@/components/Loading";
import { typeCotizationEnum, typeEnum } from "@/server/project/domain/models";
import useProjectForm from "../hooks/useProjectForm";

const RECIDENCES_TYPES = typeEnum;
const COTIZATION_TYPES = typeCotizationEnum;

const CreateNewProject = () => {
  
  const { form,
    isInputChanged,
    open,
    setOpen,
    onSubmit,
    isPending,
    isCustomNames,
    resetCustonName}=useProjectForm()


  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          variant="default"
          size="sm"
          className="p-3 text-white rounded-full bg-primary"
          asChild
        >
          <p>
            <FaPlus className="text-xs mr-1" />
            <span className="font-light">Crear projecto</span>
          </p>
        </Button>
      </SheetTrigger>
      <SheetContent overlayBg="bg-black/10">
        <SheetTitle>Nuevo projecto</SheetTitle>
        <Form {...form}>
          <form
            className="space-y-4 mt-10"
            onSubmit={form.handleSubmit(onSubmit)}
          >
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nombre del projecto</FormLabel>
                  <FormControl>
                    <Input placeholder="ej: Projecto anacaona II" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="costPerMeter"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Costo por metro</FormLabel>
                  <FormControl>
                    <Input type="number" min={0} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {!isCustomNames?.residence ? (
              <FormField
                control={form.control}
                name="residence"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Tipo de recidencia</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione tipo de recidencia" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {RECIDENCES_TYPES.map((recidence) => (
                          <SelectItem key={recidence} value={recidence}>
                            {recidence}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            ) : (
              <FormField
                control={form.control}
                name="residence"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Tipo de recidencia</FormLabel>
                    <div className="flex gap-1">
                      <FormControl>
                        <Input placeholder="ej: casa" {...field} />
                      </FormControl>
                      <Button
                        className=" bg-yellow-500 text-xs"
                        type="button"
                        onClick={() => resetCustonName('residence')}
                      >
                        Resetear
                      </Button>
                    </div>
                    <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={field.value}
                        onSelect={field.onChange}
                      />
                    </PopoverContent>
                  </Popover>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="estimatedEndDate"
              render={({ field }) => (
                <FormItem className="flex flex-col">
                  <FormLabel>Fecha final estimada</FormLabel>
                  <Popover>
                    <PopoverTrigger asChild autoFocus={false}>
                      <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={field.value!}
                        onSelect={field.onChange}
                        
                      />
                    </PopoverContent>
                  </Popover>
                  <FormMessage />
                </FormItem>
              )}
            />

            {!isCustomNames.typeCotization ?(
              <FormField
                control={form.control}
                name="typeCotization"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Tipo de cotizacion</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione el tipo de cotizacion" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {COTIZATION_TYPES.map((cotization) => (
                          <SelectItem key={cotization} value={cotization}>
                            {cotization}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />
            ) : (
              <FormField
                control={form.control}
                name="typeCotization"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Tipo de cotizacion</FormLabel>
                    <div className="flex gap-1">
                      <FormControl>
                        <Input placeholder="ej: metro" {...field} />
                      </FormControl>
                      <Button
                        className=" bg-yellow-500 text-xs"
                        type="button"
                        onClick={() => resetCustonName('typeCotization')}
                      >
                        Resetear
                      </Button>
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />
            )}

            <div className="flex justify-between items-center">
              <div>
                <Button type="submit" disabled={!isInputChanged || isPending}>
                  <span className="mr-2">
                    {isPending ? "Creando projecto" : "Crear projecto"}
                  </span>
                  {isPending && <Loading size={15} />}
                </Button>
              </div>
            </div>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
};

export default CreateNewProject;