import type { Route } from './+types/route'

import { ptBR } from 'react-day-picker/locale'
import {
  CalendarIcon,
  SearchIcon,
  CopyIcon,
  CopyPlusIcon,
  Trash2Icon,
  PlusIcon
} from 'lucide-react'
import { Link } from 'react-router'
import { useFieldArray, useForm } from 'react-hook-form'

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from '@repo/ui/components/ui/breadcrumb'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger
} from '@repo/ui/components/ui/tooltip'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText
} from '@repo/ui/components/ui/input-group'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@repo/ui/components/ui/card'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { Input } from '@repo/ui/components/ui/input'
import { Button } from '@repo/ui/components/ui/button'
import { Separator } from '@repo/ui/components/ui/separator'
import {
  Popover,
  PopoverContent,
  PopoverTrigger
} from '@repo/ui/components/ui/popover'
import { Label } from '@repo/ui/components/ui/label'
import { Calendar } from '@repo/ui/components/ui/calendar'

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Adicionar matrícula' }]
}

export default function Route({}: Route.ComponentProps) {
  const form = useForm({ defaultValues: { enrollments: [{}] } })
  const { formState, control } = form
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'enrollments'
  })

  return (
    <div className="space-y-2.5">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link to="../enrollments">Matrículas</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Adicionar matrícula</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <div className="lg:max-w-4xl mx-auto space-y-2.5">
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">Adicionar matrícula</CardTitle>
            <CardDescription>
              Siga os passos abaixo para adicionar uma nova matrícula
            </CardDescription>
          </CardHeader>

          <CardContent className="space-y-4">
            <table className="table-auto">
              <thead>
                <tr>
                  <td className="text-foreground font-medium text-sm w-1/3">
                    Colaborador
                  </td>
                  <td className="text-foreground font-medium text-sm w-1/3 pl-1">
                    Curso
                  </td>
                  <td className="text-foreground font-medium text-sm w-1/3 pl-1">
                    Matricular em
                  </td>
                  <td></td>
                </tr>
              </thead>
              <tbody>
                {fields.map((field, index) => {
                  return (
                    <tr
                      key={field.id}
                      className="*:px-1 *:first:pl-0 *:last:pr-0"
                    >
                      <td className="py-1">
                        <InputGroup>
                          <InputGroupInput placeholder="Search..." />
                          <InputGroupAddon>
                            <SearchIcon />
                          </InputGroupAddon>
                        </InputGroup>
                      </td>
                      <td className="py-1">
                        <InputGroup>
                          <InputGroupInput placeholder="Search..." />
                          <InputGroupAddon>
                            <SearchIcon />
                          </InputGroupAddon>
                        </InputGroup>
                      </td>
                      <td className="py-1">
                        <ScheduledForInput />
                      </td>
                      <td className="flex gap-1.5 py-1">
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              tabIndex={-1}
                              variant="outline"
                              className="cursor-pointer"
                            >
                              <CopyIcon />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>Duplicar linha</p>
                          </TooltipContent>
                        </Tooltip>

                        <Popover>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <PopoverTrigger asChild>
                                <Button
                                  tabIndex={-1}
                                  variant="outline"
                                  className="cursor-pointer"
                                >
                                  <CopyPlusIcon />
                                </Button>
                              </PopoverTrigger>
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>Duplicar várias vezes</p>
                            </TooltipContent>
                          </Tooltip>

                          <PopoverContent align="end" className="w-80">
                            <div className="space-y-2.5">
                              <h4 className="leading-none font-medium">
                                Duplicar várias vezes
                              </h4>
                              <p className="text-muted-foreground text-sm">
                                Duplique o curso desta linha na quantidade
                                desejada para agilizar o preenchimento.
                              </p>

                              <div className="grid gap-2">
                                <div className="grid grid-cols-3 items-center gap-4">
                                  <Label htmlFor="width">Quantidade</Label>
                                  <Input
                                    id="width"
                                    defaultValue="2"
                                    className="col-span-2 h-8"
                                  />
                                </div>
                              </div>

                              <div className="flex justify-end">
                                <Button>
                                  <CopyPlusIcon />
                                  Duplicar
                                </Button>
                              </div>
                            </div>
                          </PopoverContent>
                        </Popover>

                        <Button
                          tabIndex={-1}
                          variant="destructive"
                          className="cursor-pointer"
                          disabled={fields.length == 1}
                          onClick={() => remove(index)}
                        >
                          <Trash2Icon />
                        </Button>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
            <div>
              <Button
                onClick={() => append({})}
                className="cursor-pointer"
                variant="outline"
                size="sm"
              >
                <PlusIcon /> Adicionar
              </Button>
            </div>
            <Separator />

            <Button
              type="submit"
              className="cursor-pointer"
              disabled={formState.isSubmitting}
            >
              {formState.isSubmitting && <Spinner />}
              Continuar
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

function ScheduledForInput() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <InputGroup>
          <InputGroupInput placeholder="Imediatamente" />
          <InputGroupAddon>
            <CalendarIcon />
          </InputGroupAddon>
        </InputGroup>
      </PopoverTrigger>
      <PopoverContent className="w-full p-0" align="start">
        <Calendar
          mode="single"
          captionLayout="dropdown"
          // startMonth={new Date()}
          locale={ptBR}
        />
      </PopoverContent>
    </Popover>
  )
}