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

import { Link } from 'react-router'
import { useToggle } from 'ahooks'

import {
  Card,
  CardContent,
  CardHeader,
  CardDescription,
  CardTitle
} from '@repo/ui/components/ui/card'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from '@repo/ui/components/ui/breadcrumb'
import { Switch } from '@repo/ui/components/ui/switch'
import { createSearch } from '@repo/util/meili'
import { cloudflareContext } from '@repo/auth/context'
import { Label } from '@repo/ui/components/ui/label'

import { Assigned } from './assigned'
import { Bulk } from './bulk'
import type { Course } from '../_.$orgid.enrollments.add/data'

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

export async function loader({ params, context, request }: Route.LoaderArgs) {
  const cloudflare = context.get(cloudflareContext)
  const courses = createSearch<Course>({
    index: 'saladeaula_courses',
    sort: ['created_at:desc'],
    filter: 'unlisted NOT EXISTS',
    hitsPerPage: 100,
    env: cloudflare.env
  })

  return { courses }
}

export async function action({ request }: Route.ActionArgs) {
  const body = (await request.json()) as object
  console.log(body)
}

export default function Route({
  loaderData: { courses }
}: Route.ComponentProps) {
  const [state, { toggle }] = useToggle('bulk', 'assigned')

  const onSubmit = async (data: any) => {
    await new Promise((r) => setTimeout(r, 2000))
    console.log(data)
  }

  const props = { courses, onSubmit }

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

      <div className="lg:max-w-4xl mx-auto space-y-2.5">
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">Comprar matrículas</CardTitle>
            <CardDescription>
              Siga os passos abaixo para comprar novas matrículas.
            </CardDescription>
          </CardHeader>

          <CardContent className="space-y-4">
            <Label
              className="flex flex-row items-center justify-between cursor-pointer
                       bg-accent/50 hover:bg-accent rounded-lg border p-4
                       dark:has-aria-checked:border-blue-900
                       dark:has-aria-checked:bg-blue-950"
            >
              <div className="grid gap-1.5 font-normal">
                <p className="text-sm leading-none font-medium">
                  Adicionar colaboradores
                </p>
                <p className="text-muted-foreground text-sm">
                  Você pode adicionar agora os colaboradores que irão fazer o
                  curso ou deixar isso para depois.
                </p>
              </div>
              <Switch
                checked={state === 'assigned'}
                onCheckedChange={toggle}
                className="cursor-pointer"
              />
            </Label>

            {state == 'assigned' ? (
              <Assigned {...props} />
            ) : (
              <Bulk {...props} />
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}