import htmlParse from 'html-react-parser'
import { useRouteLoaderData } from 'react-router'

import type { TTagResponse } from '~/apis/common/get-tags'
import { ProfileIcon } from '~/components/icons/profile'
import { Card } from '~/components/ui/card'
import { CarouselSection } from '~/components/ui/carousel-section'
import { IconsSocial } from '~/components/ui/social-share'
import { BERITA } from '~/data/contents'
import type { loader } from '~/routes/_news.detail.$slug'
import { formatDate } from '~/utils/formatter'

export const NewsDetailPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>(
    'routes/_news.detail.$slug',
  )

  const { newsDetailData } = loaderData || {}
  const { title, content, featured_image, slug, author, live_at, tags } =
    newsDetailData || {}

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

          {/* START TODO: create component for this section */}
          <div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
            <div className="mb-2 flex items-center gap-2 align-middle">
              {author?.profile_picture ? (
                <img
                  src={author?.profile_picture}
                  alt={author?.name}
                  className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
                />
              ) : (
                <ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
              )}

              <div>
                <h4 className="text-md">{author?.name}</h4>
                <p className="flex gap-1 text-sm">
                  <span>{live_at && `${formatDate(live_at)}`}</span>
                  <span>·</span>
                  <span>5 min read</span>
                </p>
              </div>
            </div>
            <IconsSocial className="flex-row" />
          </div>
          {/* END TODO: create component for this section */}
          <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 items-center justify-center">
            <article className="prose prose-stone">
              {content && htmlParse(content)}
            </article>
          </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>
              <IconsSocial
                className="a"
                slug={slug}
              />
            </div>
            <div className="flex flex-wrap items-end gap-2">
              {tags?.map((tag: TTagResponse) => (
                <span
                  key={tag.id}
                  className="rounded bg-gray-300 p-1"
                >
                  {tag.name}
                </span>
              ))}
            </div>
          </div>
        </div>
      </Card>

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