import htmlParse from 'html-react-parser'
import { useReadingTime } from 'react-hook-reading-time'
import { useRouteLoaderData } from 'react-router'
import { twMerge } from 'tailwind-merge'

import { Button } from '~/components/ui/button'
import { Card } from '~/components/ui/card'
import { CarouselSection } from '~/components/ui/carousel-section'
import { NewsAuthor } from '~/components/ui/news-author'
import { SocialShareButtons } from '~/components/ui/social-share'
import { Tags } from '~/components/ui/tags'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news.detail.$slug'
import type { TNews } from '~/types/news'

export const NewsDetailPage = () => {
  const { setIsSuccessOpen } = useNewsContext()
  const loaderData = useRouteLoaderData<typeof loader>(
    'routes/_news.detail.$slug',
  )
  const berita: TNews = {
    title: loaderData?.beritaCategory?.name || '',
    description: loaderData?.beritaCategory?.description || '',
    items: loaderData?.beritaData || Promise.resolve({ data: [] }),
  }
  const currentUrl = globalThis.location
  const { title, content, featured_image, author, live_at, tags } =
    loaderData?.newsDetailData || {}
  const { shouldSubscribe } = loaderData || {}

  const { text } = useReadingTime(content || '')

  return (
    <div className="sm-max:mx-5 relative">
      <Card>
        <div className="py-5 sm:px-30">
          <h2 className="text-xl font-extrabold sm:text-4xl">{title}</h2>

          <div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
            <NewsAuthor
              author={author}
              live_at={live_at}
              text={text}
            />
            <SocialShareButtons
              url={`${currentUrl}`}
              title={`${title}`}
            />
          </div>

          <div className="w-full bg-amber-200">
            <img
              src={featured_image}
              alt={title}
              className="w-full object-cover object-center sm:h-[600px]"
            />
          </div>

          <div className="mt-8 flex flex-col items-center justify-center gap-y-4">
            <article
              className={twMerge(
                'prose prose-headings:my-0.5 prose-p:my-0.5',
                shouldSubscribe ? 'line-clamp-5' : '',
              )}
            >
              {content && htmlParse(content)}
            </article>
            {shouldSubscribe && (
              <Button
                onClick={() => setIsSuccessOpen('warning')}
                className="w-full"
              >
                Read More
              </Button>
            )}
          </div>
          <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">
            <div className="flex flex-col max-sm:mb-3">
              <p className="mb-2">Share this post</p>

              <SocialShareButtons
                url={`${currentUrl}`}
                title={`${title}`}
              />
            </div>

            <Tags tags={tags || []} />
          </div>
        </div>
      </Card>

      <Card className="bg-white p-5 max-sm:hidden">
        <CarouselSection {...berita} />
      </Card>
    </div>
  )
}