"use client";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { cn, formatDate, removeLocalOffsetFromDate } from "@/lib/utils";
import { Textarea } from "../ui/textarea";
import moment from "moment";
import { Calendar as CalendarIcon } from "lucide-react";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "../ui/form";
import { SheetFooter } from "../ui/sheet";
import { ProjectDetail } from "@/server/project/domain/models";
import useCreateTask from "@/hooks/useCreateTask";
function DialogCreateTask({
currentSingleProject,
}: {
currentSingleProject?: ProjectDetail;
}) {
const {
open,
setOpen,
users,
isPendingUsers,
projects,
isPendingProjects,
form,
isPending,
selectedProject,
selectedAreas,
onSubmit,
} = useCreateTask(currentSingleProject);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button
variant="outline"
size="sm"
className=" px-3 py-1 text-xs md:text-sm rounded-full bg-primary text-white "
>
{" "}
+ Crear tarea
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Nueva tarea</DialogTitle>
<DialogDescription>
Crea una nueva tarea y asignala a un miembro
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form className="relative" onSubmit={form.handleSubmit(onSubmit)}>
{isPendingUsers ||
(isPendingProjects && (
<div className="absolute inset-0 bg-gray-200/50 grid place-content-center">
Cargando...
</div>
))}
<div className="gap-4 space-y-3">
<div className="">
{currentSingleProject ? (
<div>
<p className="mt-0.5 text-xl tracking-wide font-semibold">
{currentSingleProject?.name}
</p>
</div>
) : (
<div>
<FormField
control={form.control}
name="projectId"
render={({ field }) => (
<FormItem>
<FormLabel>Projecto</FormLabel>
<Select onValueChange={field.onChange}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Selecciona un projecto" />
</SelectTrigger>
</FormControl>
<SelectContent>
{projects?.map((project) => {
return (
<SelectItem
key={project.id}
value={project.id}
>
{project.name}
</SelectItem>
);
})}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
</div>
)}
</div>
<div className="grid grid-cols-2 gap-3">
<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={removeLocalOffsetFromDate(new Date(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 expiración</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={new Date(field.value!)}
onSelect={(value) =>
field.onChange(formatDate(value))
}
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
</div>
<div>
<div className="grid grid-cols-2 gap-3">
<div>
<FormField
control={form.control}
name="floorName"
render={({ field }) => (
<FormItem>
<FormLabel>Piso</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Seleccíone un piso" />
</SelectTrigger>
</FormControl>
<SelectContent>
{selectedProject?.floor?.map((floor: any) => {
return (
<SelectItem key={floor.id} value={floor.name}>
{floor.name}
</SelectItem>
);
})}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
</div>
<div>
<FormField
control={form.control}
name="areaId"
render={({ field }) => (
<FormItem>
<FormLabel>Area</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Area" />
</SelectTrigger>
</FormControl>
<SelectContent>
{selectedAreas?.map((area: any) => {
return (
<SelectItem key={area.id} value={area.id}>
{area?.type}
</SelectItem>
);
})}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>
</div>
<div className="grid gap-3 grid-cols-2">
<div>
<FormField
control={form.control}
name="userId"
render={({ field }) => (
<FormItem>
<FormLabel>Usuario asignado</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="*Usuario" />
</SelectTrigger>
</FormControl>
<SelectContent>
{users?.map((user) => (
<SelectItem key={user?.id} value={user?.id}>
{user?.firstName}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
</div>
<div>
<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>
)}
/>
</div>
</div>
<FormField
control={form.control}
name="comments"
render={({ field }) => (
<FormItem>
<FormLabel>Comentarios</FormLabel>
<FormControl>
<Textarea
placeholder="*Referencias o comentarios "
className="resize-none"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex gap-2 mt-5"></div>
<SheetFooter>
<Button type="submit">Crear tarea</Button>
</SheetFooter>
</form>
</Form>
</DialogContent>
</Dialog>
);
}
export default DialogCreateTask;