'use client'

import { useEffect, useState } from 'react'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import { Swiper, SwiperSlide } from 'swiper/react'

import { Swiper as SwiperClass } from 'swiper'
import ExpertCard from './ExpertCard'

import { CaretLeftIcon, CaretRightIcon } from '@radix-ui/react-icons'
import { ArrowRight } from 'lucide-react'
import Link from 'next/link'
interface Props {
  isUser: any
  experts: any
  favoriteExperts?: string[]
}

const Slider = ({ isUser, experts , favoriteExperts }: Props) => {

  const [mounted, setMounted] = useState(false)
  const [swiperInstance, setSwiperInstance] = useState<SwiperClass | null>(null)
  const [swiperInstanceMobile, setSwiperInstanceMobile] =
    useState<SwiperClass | null>(null)

  const handleMouseEnterLeft = () => {
    swiperInstance?.slidePrev()
  }

  const handleMouseEnterRight = () => {
    swiperInstance?.slideNext()
  }
  const handleEnterLeft = () => {
    swiperInstanceMobile?.slidePrev()
  }

  const handleEnterRight = () => {
    swiperInstanceMobile?.slideNext()
  }

  if (!experts) return '...Loading'

  useEffect(() => {
    setMounted(true)
  }, [])

  function isProfileComplete(user: any) {
    return (
      user.isExpert
    )
  }

  return (
    <>
      {Object.keys(experts).length === 0 && (
        <p> There is no Experts yet , be our first :D </p>
      )}
      {!mounted ? (
        <div className="py-32 mx-auto">
          <i className="icon-[tabler--loader-2] w-8 h-8 animate-spin duration-300 text-primary"></i>
        </div>
      ) : (
        <div className="relative w-full">
          <div
            onMouseEnter={handleMouseEnterLeft}
            className="absolute inset-y-0 left-0 w-0 md:w-[24%] xl:w-[11%] bg-[#DFECF4]/70 z-40"
          ></div>
          <div
            onMouseEnter={handleMouseEnterRight}
            className="absolute inset-y-0 z right-0 w-0 md:w-[24%] xl:w-[11%] bg-[#DFECF4]/70 z-40"
          ></div>
          <div className="block md:hidden">
            <Swiper
              onSwiper={setSwiperInstanceMobile}
              className="w-full !pt-20"
              slidesPerView={1}
              spaceBetween={10}
              loop
              centeredSlides
              breakpoints={{
                768: { slidesPerView: 2, spaceBetween: 30 },
                1280: { slidesPerView: 4, spaceBetween: 30 },
                1900: { slidesPerView: 6, spaceBetween: 30 },
              }}
            >
              {experts?.map((expert) => {
                return (
                  <SwiperSlide
                    className="bg-white rounded-xl text-center"
                    key={expert?.name}
                  >
                    <ExpertCard isUser={isUser} expert={expert} isFavoriteDefault={favoriteExperts?.includes(expert.Expert?.id)} />
                  </SwiperSlide>
                )
              })}
            </Swiper>
            <div className="flex items-center justify-center gap-2 my-5">
              <button onClick={handleEnterLeft}>
                <CaretLeftIcon className="w-8 h-8 border border-dashed border-black rounded-full" />
              </button>
              <button onClick={handleEnterRight}>
                <CaretRightIcon className="w-8 h-8 border border-dashed border-black rounded-full" />
              </button>
            </div>
            <div className="flex justify-center items-center">
              <Link
                href="/search"
                className="flex justify-center items-center gap-2 w-fit"
              >
                View All <ArrowRight className="inline w-5 h-5" />
              </Link>
            </div>
          </div>
          <div className="hidden md:block">
            <Swiper
              onSwiper={setSwiperInstance}
              className="w-full !pt-20"
              slidesPerView={1}
              spaceBetween={10}
              loop
              centeredSlides
              breakpoints={{
                768: { slidesPerView: 2, spaceBetween: 30 },
                1280: { slidesPerView: 4, spaceBetween: 30 },
                1900: { slidesPerView: 6, spaceBetween: 30 },
              }}
            >
              {experts?.map((expert) => (
                <SwiperSlide
                  className="bg-white rounded-xl text-center"
                  key={expert?.name}
                >
                  <ExpertCard isUser={isUser} expert={expert} isFavoriteDefault={favoriteExperts?.includes(expert.Expert?.id)}/>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
      )}
    </>
  )
}

export default Slider