import useEmblaCarousel from 'embla-carousel-react'
import { useCallback } from 'react'

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 { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'

export const CarouselHero = (properties: TNews) => {
  const { setIsSuccessOpen } = useNewsContext()
  const { title, description, items } = properties
  const [emblaReference, emblaApi] = useEmblaCarousel({ loop: true })

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

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

  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">
          <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
        className="embla hero overflow-hidden"
        ref={emblaReference}
      >
        <div className="embla__container hero flex sm:gap-x-8">
          {items.map(({ featured, title, content, slug, isPremium }, index) => (
            <div
              className="embla__slide hero w-full min-w-0 flex-none"
              key={index}
            >
              <div className="max-sm:mt-2 sm:flex">
                <img
                  className="col-span-2 aspect-[174/100] object-cover"
                  src={featured}
                  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 text-[#777777] sm:text-xl">
                      {content}
                    </p>
                  </div>
                  <Button
                    size="block"
                    {...getPremiumAttribute({
                      isPremium,
                      slug,
                      onClick: () => setIsSuccessOpen('warning'),
                    })}
                  >
                    View More
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}