import Image from 'next/image'

import Link from 'next/link'
import { Card } from '@/components/Card'
import { Container } from '@/components/Container'
import { CalendarDaysIcon } from '@heroicons/react/24/solid'
import exteriorFrontImage from '@/images/photos/exterior-front.png'
import { type BlogPostWithSlug, getAllBlogPosts } from '@/lib/articles'
import { formatDate } from '@/lib/formatDate'
import { getUpcomingEvents, Event } from './calendar/page'
import dayjs from 'dayjs'


function LinkButton({
  href,
  children,
}: {
  href: string
  children: React.ReactNode
}) {
  return (
    <Link
      href={href}
      className="rounded-md px-3 py-2 font-semibold text-center transition bg-sky-300 hover:bg-sky-400"
    >
      {children}
    </Link>
  )
}

function Article({ article }: { article: BlogPostWithSlug }) {
  return (
    <Card as="article">
      <Card.Title href={`/news/${article.slug}`}>
        {article.title}
      </Card.Title>
      <Card.Eyebrow as="time" dateTime={article.date} decorate>
        {formatDate(article.date)}
      </Card.Eyebrow>
      <Card.Description>{article.description}</Card.Description>
      <Card.Cta>Read article</Card.Cta>
    </Card>
  )
}

function EventListItem({ event }: { event: Event }) {
  const start = dayjs(event.start);
  const end = dayjs(event.end);

  const date = start.format('YYYY-MM-DD');

  return (
    <li className="flex gap-4">
      <dl className="flex flex-auto flex-wrap gap-x-2">
        <dt className="sr-only">Title</dt>
        <dd className="w-full flex-none text-sm font-medium text-zinc-900">
          {event.name}
        </dd>
        <dt className="sr-only">Date</dt>
        <dd className="text-xs text-zinc-500">
          {date}
        </dd>
        <dt className="sr-only">Time</dt>
        {event.allDay
          ? <dd
            className="ml-auto text-xs text-zinc-400"
            aria-label="All day"
          >
            All day
          </dd>
          : (event.end
            ? (
              <dd
                className="ml-auto text-xs text-zinc-400"
                aria-label={`${start.format('YYYY-MM-DD HH:mm')} until ${end.format('YYYY-MM-DD HH-mm')}`}
              >
                <time dateTime={start.format('YYYY-MM-DD HH:mm')}>{start.format('h:mm a')}</time>{' '}
                <span aria-hidden="true">—</span>{' '}
                <time dateTime={end.format('YYYY-MM-DD HH-mm')}>{end.format('h:mm a')}</time>{' '}
              </dd>
            ) : (
              <dd
                className="ml-auto text-xs text-zinc-400"
                aria-label={start.format('YYYY-MM-DD HH-mm')}
              >
                <time dateTime={start.format('YYYY-MM-DD HH-mm')}>{start.format('h:mm a')}</time>{' '}
              </dd>
            )
          )
        }
      </dl>
    </li>
  )
}

async function Events() {
  const events = await getUpcomingEvents();

  return (
    <div className="rounded-2xl border border-zinc-100 p-6">
      <h2 className="flex text-sm font-semibold text-zinc-900">
        <CalendarDaysIcon className="h-6 w-6 flex-none fill-zinc-100 stroke-zinc-400" />
        <span className="ml-3">Upcoming Events</span>
      </h2>
      <ol className="mt-6 space-y-4">
        {events.map((event, idx) => (
          <EventListItem key={idx} event={event} />
        ))}
      </ol>
      {/* 
      <Button href="#" variant="secondary" className="group mt-6 w-full">
        Full Calendar
      </Button>
      */}
    </div>
  )
}

export default async function Home() {
  let articles = (await getAllBlogPosts()).slice(0, 4)

  return (
    <>
      <div className="mx-auto max-w-7xl px-6 mt-24 lg:px-8">
        <div className="relative px-4 sm:px-8 lg:px-12">
          <div className="mx-auto max-w-2xl lg:mx-0 grid lg:max-w-none grid-cols-1 lg:grid-cols-2 lg:gap-x-8 gap-y-10">
            <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-6xl lg:col-span-2">
              West Sound Community Hall
            </h1>
            <div className="max-w-xl">
              <p className="mt-6 text-base text-zinc-600">
                The West Sound Community Hall is located in the hamlet of West Sound
                on Orcas Island, about 10 minutes from the ferry landing and
                Eastsound. It has served as a public assembly hall since it was
                built by volunteers in 1902.
              </p>
              <p className="mt-6 text-base text-zinc-600">
                Facing West Sound, the Hall is at the heart of the West Sound community.
              </p>
            </div>
            <Image
              src={exteriorFrontImage}
              alt="Exterior front of the West Sound Hall"
              className="lg:row-span-2 w-full max-w-xl rounded-2xl object-cover lg:max-w-none"
            />
            <div className="h-fit max-w-xl rounded-2xl border border-zinc-100 p-6">
              <div className="flex flex-col gap-y-4">
                <LinkButton href='/club'>Join or Renew your Membership</LinkButton>
                <LinkButton href='/rental'>Rent the Hall</LinkButton>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Container className="mt-24 md:mt-28">
        <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
          <div className="flex flex-col gap-16">
            {articles.map((article) => (
              <Article key={article.slug} article={article} />
            ))}
          </div>
          <div className="lg:pl-16 xl:pl-24">
            <Events />
          </div>
        </div>
      </Container>
    </>
  )
}