import { PaginatedDocs } from 'payload'
import { Author, Book, HoldRequest, Repository } from '@/payload-types'
import { Button } from '../ui/button'
import Image from 'next/image'

type Props = {
  repos: PaginatedDocs<Repository> | null
}
const HoldRequestNotifications = (props: Props) => {
  const { repos } = props

  const totalHoldNotifications = repos?.docs.flatMap((r) => r.holdRequests?.docs).length || 0

  const holdRequestsByRepoElements = repos?.docs.map((r) => {
    return (
      <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {r.holdRequests?.docs?.map((h) => {
          const hold = h as HoldRequest
          const book = hold.book as Book
          const authors = book.authors as Author[]
          return (
            <li key={hold.id} className="col-span-1 rounded-lg shadow-sm border border-accent">
              <div className="flex w-full items-center justify-between space-x-6 p-6">
                <div className="flex-1 truncate">
                  <div className="flex items-center space-x-3">
                    <h3 className="truncate text-sm font-medium text-foreground">{book.title}</h3>
                  </div>
                  <p className="mt-1 truncate  text-sm text-gray-500">
                    {authors.map((a) => a.lf).join(' | ')}
                  </p>
                  {hold.isHolding ? (
                    <span>
                      <span className="mr-0.5 text-xs">Hold Until</span>
                      <time className="inline-flex shrink-0 items-center rounded-full bg-background/20 px-1.5 py-0.5 text-xs font-medium text-emerald-600 ring-1 ring-emerald-600/20 ring-inset">
                        {hold.holdingUntilDate}
                      </time>
                    </span>
                  ) : (
                    <span>
                      <span className="mr-0.5 text-xs">Requested </span>
                      {!!hold.dateRequested && (
                        <time className="inline-flex shrink-0 items-center rounded-full bg-background/20 px-1.5 py-0.5 text-xs font-medium text-amber-500 ring-1 ring-amber-600/20 ring-inset">
                          {new Date(hold.dateRequested).toLocaleDateString()}
                        </time>
                      )}
                    </span>
                  )}
                </div>
                <img
                  alt=""
                  className="h-16 shrink-0 rounded bg-gray-300"
                  src={
                    book.isbn
                      ? `https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg`
                      : '/images/book-48.svg'
                  }
                />
              </div>
              <div>
                <div className="flex gap-3 justify-around">
                  <Button className="inline-flex flex-1 items-center justify-center gap-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-foreground bg-foreground/5 hover:bg-red-400/10 cursor-pointer hover:scale-105">
                    <Image width={24} height={24} src="/images/reject.svg" alt="approve hold" />
                    <span>Decline</span>
                  </Button>
                  <Button className="inline-flex flex-1 items-center justify-center gap-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-foreground bg-emerald-400/30 hover:bg-emerald-300/60 cursor-pointer hover:scale-105">
                    <Image width={24} height={24} src="/images/approve.svg" alt="approve hold" />
                    <span>Approve</span>
                  </Button>
                </div>
              </div>
            </li>
          )
        })}
      </ul>
    )
  })

  return (
    <section className="py-6">
      <div className="mb-4 flex justify-between items-end">
        <h3 className="px-4 text-lg font-semibold">Inbound Hold Requests</h3>
        {!!totalHoldNotifications && (
          <span className="font-bold">{totalHoldNotifications} Unaddressed</span>
        )}
      </div>
      {holdRequestsByRepoElements}
    </section>
  )
}

export default HoldRequestNotifications