"use client";
import React, { useCallback, useEffect, useState } from "react";
import { EmblaOptionsType } from "embla-carousel";
import useEmblaCarousel from "embla-carousel-react";
import "../../styles/embla-carousel.css";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import Fade from "embla-carousel-fade";
import { Thumb } from "./EmblaCarouselThumbs";
import Autoplay from "embla-carousel-autoplay";

type PropType = {
  slides: string[];
  options?: EmblaOptionsType;
};

const EmblaCarousel: React.FC<PropType> = (props) => {
  const { slides, options } = props;
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [emblaMainRef, emblaMainApi] = useEmblaCarousel(options, [
    Fade(),
    Autoplay(),
  ]);
  const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({
    containScroll: "keepSnaps",
    dragFree: true,
  });

  const onThumbClick = useCallback(
    (index: number) => {
      if (!emblaMainApi || !emblaThumbsApi) return;
      emblaMainApi.scrollTo(index);
    },
    [emblaMainApi, emblaThumbsApi]
  );

  const onSelect = useCallback(() => {
    if (!emblaMainApi || !emblaThumbsApi) return;
    setSelectedIndex(emblaMainApi.selectedScrollSnap());
    emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap());
  }, [emblaMainApi, emblaThumbsApi, setSelectedIndex]);

  useEffect(() => {
    if (!emblaMainApi) return;
    onSelect();

    emblaMainApi.on("select", onSelect).on("reInit", onSelect);
  }, [emblaMainApi, onSelect]);

  return (
    <div className="embla">
      <div className="absolute inset-0 bg-[linear-gradient(90deg,_#000000,_#0f356c)] opacity-70 z-10"></div>
      <div className="absolute inset-0 max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center z-20">
        <h1 className="text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl font-heading">
          Badagry Museum: Preserving Nigeria's History
        </h1>
        <p className="mt-6 max-w-3xl mx-auto text-xl text-gray-300">
          Explore the profound history of the West African Slave Trade and
          Nigeria's rich cultural heritage through our immersive museum
          experience.
        </p>

        <div className="mt-10 flex justify-center">
          <div className="flex flex-col sm:flex-row gap-3 sm:gap-6 w-full sm:w-auto px-4 sm:px-0">
            <Link href="/booking" className="w-full sm:w-auto">
              <Button className="w-full sm:w-auto py-3 px-8 rounded-lg text-lg sm:text-lg font-semibold shadow-lg bg-primary hover:bg-primary-dark hover:scale-105  transition duration-300 active:scale-95">
                Book a Visit
              </Button>
            </Link>
            <Link href="/history" className="w-full sm:w-auto">
              <Button className="w-full sm:w-auto py-3 px-8 text-lg sm:text-lg font-semibold rounded-lg shadow-lg bg-white text-gray-900 hover:bg-gray-100  hover:scale-105 transform transition duration-300 active:scale-95">
                Learn History
              </Button>
            </Link>
          </div>
        </div>
      </div>
      <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-neutral-light to-transparent"></div>
      <div className="embla__viewport" ref={emblaMainRef}>
        <div className="embla__container">
          {slides.map((img, index) => (
            <div className="embla__slide" key={index}>
              <img
                className="embla__slide__img w-full h-auto object-cover"
                src={`./images/${img}`}
                alt={`${img}-${index}`}
                style={{ objectFit: "cover", width: "100%" }}
              />
            </div>
          ))}
        </div>
      </div>

      <div className="embla-thumbs absolute bottom-10 left-0 right-0 z-20">
        <div className="embla-thumbs__viewport" ref={emblaThumbsRef}>
          <div className="embla-thumbs__container">
            {slides.map((img, index) => (
              <Thumb
                key={index}
                onClick={() => onThumbClick(index)}
                selected={index === selectedIndex}
                index={index}
                img={img}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default EmblaCarousel;
