"use client"
import { Link } from "@/i18n/routing"
import Image from "next/image"
import { useState } from "react"
import { Swiper, SwiperSlide } from "swiper/react"
import { Mousewheel, Autoplay } from "swiper/modules"
import "swiper/css"
import { css } from "@emotion/css"
import classNames from "classnames"
import { useSetRecoilState } from "recoil"
import { aboutState } from "@/recoil"

const slideItems = [
  {
    image: "/img/account/Photo1.png",
    title: "One App. All You Need",
    describe: "Wizzor is perfect for local businesses, clubs, and communities — helping you stay connected with customers through Notices and Chat Groups.",
  },
  {
    image: "/img/account/Photo2.png",
    title: "The App Protects Your Privacy",
    describe: "Wizzor is a fee-based service with No Data Mining or Selling of Information to Third Parties! No unwanted advertising.",
  },
  {
    image: "/img/account/Photo3.png",
    title: "All About Your World",
    describe: "Wizzor is about you, family, friends, place of workship, business, and neighborhood.",
  },
]

export default function SlideWirror() {
  const [swiperRef, setSwiperRef] = useState(null as any)
  const [activeIndex, setActiveIndex] = useState(0)
  const openAbout = useSetRecoilState(aboutState)

  const handleChangeSlide = (swiper: any) => {
    setActiveIndex(swiper.realIndex)
  }

  const customButtonCss = css`
    .swiper {
      height: 100%;
    }
  `

  return (
    <div className={classNames("hidden lg:block lg:basis-1/2 lg:shrink-0 xl:basis-[55%] overflow-hidden", customButtonCss)}>
      <div className="h-full relative">
        <Swiper
          slidesPerView={1}
          mousewheel={{
            forceToAxis: true,
            releaseOnEdges: true,
            sensitivity: 0,
          }}
          onSwiper={(swiper: any) => setSwiperRef(swiper)}
          onSlideChange={handleChangeSlide}
          navigation={false}
          loop={true}
          initialSlide={0}
          modules={[Autoplay, Mousewheel]}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          className="w-full">
          {slideItems.map((item, index) => (
            <SwiperSlide
              className="relative"
              key={index}>
              <Image
                src={item.image}
                alt="photo"
                width={808}
                height={982}
                className="rounded-lg w-full h-full object-cover max-h-[100vh]"
                onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
              />
              <div className="flex items-center justify-between w-full absolute top-4 left-0 z-20 px-4 md:px-8 lg:px-12 xl:px-20">
                <Image
                  src="/wizzor-white.png"
                  alt="wizzor"
                  width={100}
                  height={100}
                />
                <Link
                  href="#"
                  scroll={false}
                  onClick={() => openAbout(true)}
                  className="font-semibold inline-flex bg-[rgba(255,253,243,0.3)] text-sm px-6 py-3 rounded-full text-white">
                  About Wizzor
                </Link>
              </div>
              <div className="absolute w-full top-0 left-0 z-10 h-[400px] max-h-[50vh] bg-gradient-to-b from-black/100 to-black/0"></div>
              <div className="absolute top-36 left-0 text-white z-40 px-4 md:px-8 lg:px-12 xl:px-20">
                <h3 className="font-bold text-xl md:text-2xl xl:text-3xl mb-2">{item.title}</h3>
                <p className="text-lg md:text-xl xl:text-2xl">{item.describe}</p>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
        <div className="flex gap-4 absolute bottom-4 left-1/2 -translate-x-1/2 w-full z-10 px-4 md:px-8 lg:px-12 xl:px-20 justify-center">
          {slideItems.map((_, index) => (
            <button
              key={index}
              onClick={() => swiperRef?.slideToLoop(index)}
              className={`grow max-w-52 h-2 rounded-lg transition-all ${activeIndex === index ? "bg-white" : "bg-[var(--secondary-10)] opacity-50"}`}
            />
          ))}
        </div>
      </div>
    </div>
  )
}