import useEmblaCarousel from 'embla-carousel-react'
import { Suspense, useCallback, useEffect, useState } from 'react'
import { Await, useRouteLoaderData } from 'react-router'
import { stripHtml } from 'string-strip-html'

import { ErrorAwait } from '~/components/error/await'
import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news'
import type { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'

import { Button } from './button'

export const CarouselHero = (properties: TNews) => {
  const { setIsSuccessOpen } = useNewsContext()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
  const { userData } = loaderData || {}
  const { title, description, items } = properties
  const [emblaReference, emblaApi] = useEmblaCarousel({ loop: false })

  const [canScrollNext, setCanScrollNext] = useState(false)
  const [canScrollPrevious, setCanScrollPrevious] = useState(false)

  const updateButtons = useCallback(() => {
    if (emblaApi) {
      setCanScrollPrevious(emblaApi.canScrollPrev())
      setCanScrollNext(emblaApi.canScrollNext())
    }
  }, [emblaApi])

  useEffect(() => {
    if (emblaApi) {
      updateButtons()
      emblaApi.on('select', updateButtons)
    }
  }, [emblaApi, updateButtons])

  const previousSlide = useCallback(() => {
    if (canScrollPrevious && emblaApi) emblaApi.scrollPrev()
  }, [emblaApi, canScrollPrevious])

  const nextSlide = useCallback(() => {
    if (canScrollNext && emblaApi) emblaApi.scrollNext()
  }, [emblaApi, canScrollNext])

  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 className="flex gap-2.5">
          <CarouselButton
            direction="prev"
            isEnabled={canScrollPrevious}
            onClick={previousSlide}
          />
          <CarouselButton
            direction="next"
            isEnabled={canScrollNext}
            onClick={nextSlide}
          />
        </div>
      </div>

      <div
        className="embla hero overflow-hidden"
        ref={emblaReference}
      >
        <div className="embla__container hero flex sm:gap-x-8">
          <Suspense
            fallback={
              <div
                role="status"
                className="embla__slide hero flex w-full min-w-0 flex-none animate-pulse justify-between gap-3 max-sm:mt-2 sm:flex"
              >
                <div className="flex aspect-[174/100] h-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
                  <ImageSkeletonIcon />
                </div>
                <div className="flex w-full flex-col gap-7">
                  <div className="flex flex-col gap-4">
                    <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                  </div>
                  <div className="flex flex-col gap-2.5">
                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
                    <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                  </div>
                  <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
                </div>
                <span className="sr-only">Loading...</span>
              </div>
            }
          >
            <Await
              resolve={items}
              errorElement={<ErrorAwait />}
            >
              {(value) =>
                value.data.map(
                  (
                    { featured_image, title, content, slug, is_premium },
                    index,
                  ) => (
                    <div
                      className="embla__slide hero w-full min-w-0 flex-none max-sm:mt-2 sm:flex"
                      key={index}
                    >
                      <img
                        className="aspect-[174/100] h-full rounded-md object-cover"
                        src={featured_image}
                        alt={title}
                      />
                      <div className="flex h-full flex-col justify-between gap-7 sm:px-5">
                        <div>
                          <h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl">
                            {title}
                          </h3>
                          <p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl">
                            {stripHtml(content).result}
                          </p>
                        </div>
                        <Button
                          size="block"
                          {...getPremiumAttribute({
                            isPremium: is_premium,
                            slug,
                            onClick: () => setIsSuccessOpen('warning'),
                            userData,
                          })}
                        >
                          View More
                        </Button>
                      </div>
                    </div>
                  ),
                )
              }
            </Await>
          </Suspense>
        </div>
      </div>
    </div>
  )
}
