'use client'

import { Book, Genre, Repository } from '@/payload-types'

import { Combobox, ComboboxLabel, ComboboxOption, ComboboxDescription } from '@/components/combobox'
import { Field, Label } from '@/components/fieldset'
import { PaginatedDocs } from 'payload'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'

import { Loader2 } from 'lucide-react'
import { RichText } from '@/components/RichText'

type DropDownProps = {
  currentRepository: Repository
  repositories: Repository[]
}
function RepoDropdown({ currentRepository, repositories }: DropDownProps) {
  return (
    <Field className="">
      <Label htmlFor="repositories">From Repository</Label>
      <div className="flex gap-2">
        <Combobox
          name="repositories"
          options={repositories}
          displayValue={(repo) => repo?.name}
          defaultValue={currentRepository}
          className="w"
        >
          {(repo) => (
            <ComboboxOption value={repo}>
              <ComboboxLabel>{repo.abbreviation}</ComboboxLabel>
              <ComboboxDescription>{repo.name}</ComboboxDescription>
            </ComboboxOption>
          )}
        </Combobox>
        <Button className="hover:scale-105 bg-emerald-500 text-foreground hover:text-black">
          <Loader2 className="animate-spin" />
          <span>Request Copy</span>
        </Button>
      </div>
    </Field>
  )
}

type Props = {
  book: Book
  repositories: PaginatedDocs<Repository>
}

export default function BookByIdPageClient(props: Props) {
  const { book, repositories } = props

  const repos = repositories.docs

  return (
    <div className="mx-auto px-4 py-16">
      {/* Book */}
      <div className="md:grid md:grid-cols-7 md:gap-8">
        {/* Book Cover */}
        <div className="md:col-span-3">
          <img
            alt="book cover art"
            src={
              book.isbn
                ? `https://covers.openlibrary.org/b/isbn/${book.isbn}-L.jpg`
                : '/images/book-48.svg'
            }
            className="w-full rounded-lg bg-gray-100 object-cover"
          />
        </div>

        {/* Book details */}
        <div className="mt-14 sm:mt-16 md:col-span-4 md:mt-0">
          <div className="">
            <div className="mt-4">
              <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
                {book.title}
              </h1>

              <h2 id="information-heading" className="sr-only">
                Book information
              </h2>
              <p className="mt-2 text-sm text-muted-foreground">
                {book.publication && (
                  <span>
                    Published:&nbsp;
                    <time dateTime={book.publication}>{book.publication}</time>
                  </span>
                )}
              </p>
            </div>
          </div>

          <p className="my-6 text-accent-foreground">{book.summary}</p>

          <RepoDropdown currentRepository={repos[0]} repositories={repos} />

          <div className="mt-10 border-t border-gray-200 pt-10 ">
            <h3 className="text-sm font-medium text-foreground">Genres</h3>
            <div className="mt-4">
              <ul role="list" className="text-foreground flex gap-2 flex-wrap">
                {(book.genre as Genre[])?.map((g) => (
                  <Badge key={g.id} className="inline-block cursor-pointer">
                    {g.name}
                  </Badge>
                ))}
              </ul>
            </div>
          </div>

          {book.description && (
            <div className="mt-10 border-t border-gray-200 pt-10">
              <h3 className="text-sm font-medium text-muted-foreground">Description</h3>
              <RichText data={book.description} />
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
