import { useRouteLoaderData } from 'react-router'
import { stripHtml } from 'string-strip-html'
import { twMerge } from 'tailwind-merge'

import type { TNewsResponse } from '~/apis/common/get-news'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import { Button } from '~/components/ui/button'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news'
import { getPremiumAttribute } from '~/utils/render'

type TNews = {
  title: string
  description: string
  items: TNewsResponse[]
}

export const CategorySection = (properties: TNews) => {
  const { setIsSuccessOpen } = useNewsContext()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
  const { userData } = loaderData || {}

  const { title, description, items } = properties

  const nextSlide = () => {
    // patch data next page
  }

  const previousSlide = () => {
    // patch previous page
  }

  return (
    <div className="">
      <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
        <div className="grid">
          <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
            {title}
          </h2>
          <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
            {description}
          </p>
        </div>
      </div>

      <div className="grid sm:grid-cols-3 sm:gap-x-8">
        {items.map(
          (
            { featured_image, title, content, tags, slug, is_premium },
            index,
          ) => (
            <div
              key={index}
              className={twMerge('grid sm:gap-x-8')}
            >
              <img
                className={twMerge(
                  'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
                )}
                src={featured_image}
                alt={title}
              />
              <div className={twMerge('flex flex-col justify-between gap-4')}>
                <div
                  className={twMerge(
                    'my-3 flex gap-2 uppercase max-sm:text-sm',
                  )}
                >
                  {tags?.map((item) => (
                    <span
                      key={index}
                      className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
                    >
                      {item.name}
                    </span>
                  ))}
                  {is_premium && (
                    <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
                      Premium Content
                    </span>
                  )}
                </div>

                <div>
                  <h3
                    className={twMerge(
                      'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
                    )}
                  >
                    {title}
                  </h3>
                  <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
                    {stripHtml(content).result}
                  </p>
                </div>
                <Button
                  size="block"
                  {...getPremiumAttribute({
                    isPremium: is_premium,
                    slug,
                    onClick: () => setIsSuccessOpen('warning'),
                    userData,
                  })}
                  className="mb-5"
                >
                  View More
                </Button>
              </div>
            </div>
          ),
        )}
      </div>

      <div className="my-5 mt-5 flex flex-row-reverse">
        <div className="flex gap-2.5">
          <CarouselPreviousIcon
            color="#DCDCDC"
            className="cursor-pointer"
            width={45}
            height={45}
            onClick={previousSlide}
          />
          <CarouselNextIcon
            color="#2E2F7C"
            className="cursor-pointer"
            width={45}
            height={45}
            onClick={nextSlide}
          />
        </div>
      </div>
    </div>
  )
}