import dayjs from 'dayjs'
import cx from 'classnames'

import { getFirstTerm } from '@/lib/utilities'

import ParseBlogContent from '@/components/parsers/ParseBlogContent'
import ParseContent from '@/components/parsers/ParseContent'
import AnimateUnderline from '@/components/shared/AnimateUnderline'
import Button from '@/components/shared/Button'
import Container from '@/components/shared/Container'
import Divider from '@/components/shared/Divider'
import SocialShare from '@/components/shared/SocialShare'
import CallToAction from '@/components/sections/CallToAction'
import PostCard from '@/components/blocks/PostCard'
import Newsletter from '@/components/forms/Newsletter'

type Props = {
  post: any
  morePosts?: []
}

export default function SinglePost({ post, morePosts }: Props) {
  const { date, title, featuredImage, excerpt, categories, blogContent, customCtaSection } = post
  const {
    accentColor = '',
    sideBarContent,
    eventDate,
    eventBlurb,
    enableEventRegisterButton,
    registerButtonLink,
  } = blogContent

  const category = getFirstTerm(categories)
  const isEvent = category?.slug === 'event'

  const label = (() => {
    switch (category?.slug) {
      case 'blog':
        return 'Blog'
      case 'news':
        return 'News'
      case 'event':
        return 'Event'
    }
  })()

  //const date1 = Date.parse(eventDate)
  const tempEventDate = new Date(Date.parse(eventDate) + 1000 * 60 * 60 * 24)

  const current = new Date()
  const currentDate = new Date(
    current.toLocaleString('en-US', {
      timeZone: 'America/Chicago',
    })
  )

  return (
    <>
      <Container className="pt-6 sm:pt-12">
        <div className="grid gap-y-16 sm:gap-y-20 lg:gap-y-24 pb-16 sm:pb-20 lg:pb-24">
          <div>
            <AnimateUnderline as="h2" className="inline-block text-h6">
              {label}
            </AnimateUnderline>
            {!isEvent && <p className="pt-3 text-h8 font-normal">{dayjs(date).format('MMMM D, YYYY')}</p>}
          </div>

          <div>
            <h1 className="text-h11">{title}</h1>
            {isEvent && tempEventDate <= currentDate ? (
              <p className="pt-5 text-subtitle">
                <span className="pr-3">Past Event</span>
                <span className={`border-r-8 text-accent-${accentColor}`}></span>
                <span className="pl-3">{eventDate}</span>
              </p>
            ) : null}
            {isEvent && tempEventDate > currentDate ? <p className="pt-5 text-subtitle">{eventDate}</p> : null}
          </div>

          <SocialShare
            title={title}
            excerpt={excerpt}
            image={featuredImage?.node?.imageUrl}
            accentColor={accentColor}
          />

          <div className="flex flex-col md:flex-row gap-16">
            <div className="grid gap-y-8 md:flex-1">
              {isEvent && eventBlurb && <p className="text-pull-quote">{eventBlurb}</p>}
              <ParseBlogContent sections={blogContent?.blogLayoutSections} accentColor={accentColor} />
              {enableEventRegisterButton && registerButtonLink?.url && (
                <div>
                  <Button href={registerButtonLink?.url} target={registerButtonLink?.target} color="dark">
                    {registerButtonLink?.title || 'Register'}
                  </Button>
                </div>
              )}
            </div>

            {sideBarContent && (
              <aside className="md:w-60">
                {isEvent ? (
                  <div className="grid gap-y-8 border-l pl-8">
                    <div>
                      <AnimateUnderline as="h2" className="inline-block text-h6">
                        Event Details
                      </AnimateUnderline>
                    </div>

                    {sideBarContent?.eventSidebarDetails.map(
                      ({ label, details }: { label: string; details: string }) => (
                        <div key={label}>
                          <p className={cx('pb-1 text-h7', accentColor && `text-accent-${accentColor}`)}>{label}</p>
                          <ParseContent content={details} replaceOptions={{ p: { textClass: 'text-body-sm' } }} />
                        </div>
                      )
                    )}
                  </div>
                ) : sideBarContent ? (
                  <div className="p-8 bg-black">
                    <h3 className={cx('pb-8 text-h12', accentColor && `text-accent-${accentColor}`)}>
                      {sideBarContent.blogSidebarText}
                    </h3>
                    <Newsletter />
                  </div>
                ) : null}
              </aside>
            )}
          </div>

          <Divider />

          {morePosts && (
            <section>
              <h2 className="pb-12 text-pull-quote">Read more</h2>

              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-16 sm:gap-x-12">
                {morePosts.map((post: any) => (
                  <div key={post?.slug} className="flex">
                    <PostCard post={post} />
                  </div>
                ))}
              </div>
            </section>
          )}
        </div>
      </Container>

      {customCtaSection?.enableCta && (
        <CallToAction
          heading={customCtaSection?.ctaText}
          link={customCtaSection?.ctaLink}
          accentColor={accentColor}
          linkColor="white"
        />
      )}
    </>
  )
}