'use client'

import "react-multi-carousel/lib/styles.css";

import React, { useRef, useState } from 'react';
import Image from 'next/image';
import useDeviceType from '@/utils/getDeviceType';
import { useCredentialContext } from "@/hooks/credenciado";

import playVideo from '../../../../../../public/assets/Images/Icons/playVideo.svg';
import ArrowRithCarrousel from "../../../../../../public/assets/Images/Icons/ArrowRithCarroussel.svg";
import ArrowLeftCarroussel from "../../../../../../public/assets/Images/Icons/ArrowLeftCarroussel.svg";
import Carousel from 'react-multi-carousel';

const CarouselTestimonials = () => {
    const deviceType = useDeviceType();
    const [activeSlide, setActiveSlide] = useState(0);
    const carouselRef = useRef<Carousel | null>(null);
    const { setModalDepoimentos } = useCredentialContext();

    const dataCard = [
        {
            name: 'Neylane',
            title: 'Cliente Plamev',
            link: 'https://www.youtube.com/embed/yIAm9rDaWaA?si=SdYn9vHT7MA9aBYX',
            imgSrc: "/assets/Images/ImageHome/neylane.svg",
            alt: 'Neylane',
        },
        {
            name: 'Mirela Ferreira',
            title: 'Cliente Plamev',
            link: 'https://www.youtube.com/embed/DsERNMIR--E?si=fre4O2ZrW-GDphqP',
            imgSrc: "/assets/Images/ImageHome/mirelaFerreira.svg",
            alt: 'Mirela Ferreira',
        },
        {
            name: 'Bárbara',
            title: 'Cliente Plamev',
            link: 'https://www.youtube.com/embed/hkmIKcKREV0?si=gaaICRq2IcFztlxy',
            imgSrc: "/assets/Images/ImageHome/barbara.svg",
            alt: 'Bárbara',
        }
    ];

    const handleNext = () => {
        if (carouselRef.current && typeof carouselRef.current.next === 'function') {
            carouselRef.current.next(1);
        }
    };

    const handlePrev = () => {
        if (carouselRef.current && typeof carouselRef.current.previous === 'function') {
            carouselRef.current.previous(1);
        }
    };

    const CustomDot: React.FC<{ onClick?: () => void; active?: boolean }> = ({ onClick, active }) => (
        <div
            onClick={onClick}
            className={`mx-1 h-1 w-10 rounded-full transition ${active ? 'bg-gray-500' : 'bg-gray-200'}`}
            style={{ cursor: 'pointer' }}
        />
    );

    const responsive = {
        desktop: {
            breakpoint: { max: 3000, min: 1024 },
            items: 2,
            slidesToSlide: 2,
            partialVisibilityGutter: 15
        },
        tablet: {
            breakpoint: { max: 1024, min: 480 },
            items: 2,
            slidesToSlide: 2,
            partialVisibilityGutter: 20
        },
        mobile: {
            breakpoint: { max: 480, min: 0 },
            items: 1,
            slidesToSlide: 1,
            partialVisibilityGutter: 40
        }
    };

    return (
        <div className="w-full">
            <Carousel
                ref={(ref) => {
                    carouselRef.current = ref;
                }}

                partialVisible={true}
                swipeable={true}
                draggable={true}
                showDots={false} // Desativamos os dots padrão do componente
                responsive={responsive}
                ssr={true}
                infinite={true}
                autoPlay={false}
                autoPlaySpeed={0}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass={`carousel-container`}
                deviceType={deviceType}
                itemClass={`w-full h-full p-4`}
                arrows={false}
                afterChange={(previousSlide, { currentSlide }) => {
                    setActiveSlide(currentSlide); // Atualiza o slide ativo quando o carrossel muda
                }}
            >

                {!!dataCard && dataCard.map((dataCard, index) => (
                    <div
                        key={index}
                        className="bg-cover bg-no-repeat h-[20rem] sm:h-[300px] rounded-[16px]  p-6 flex flex-col sm:min-w-[294px] lg:min-w-[294px]"
                        style={{ backgroundImage: `url(${dataCard.imgSrc})` }}
                    >
                        <div className="mt-auto flex items-end justify-between">
                            <div>
                                <h3 className="text-sm md:text-base text-white font-semibold">{dataCard.name}</h3>
                                <p className="text-white md:text-sm text-xs">{dataCard.title}</p>
                            </div>

                            <div onClick={() => setModalDepoimentos(dataCard.link)}
                                className="bg-transparent border cursor-pointer text-white px-2 py-1 rounded-full flex flex-row-reverse items-center blank text-xs">
                                <span className="ml-2">
                                    <Image src={playVideo} alt='play' className="w-4 h-auto" />
                                </span>
                                Ver vídeo
                            </div>
                        </div>
                    </div>
                ))
                }
            </Carousel>

            <div className="flex justify-between items-center mt-4 mx-4 md:mx-0 space-x-4">
                <div className="flex space-x-2">
                    {dataCard.map((_, index) => (
                        <CustomDot
                            key={index}
                            onClick={() => carouselRef.current?.goToSlide(index)}
                            active={activeSlide === index || (activeSlide % (dataCard.length) === index)}
                        />
                    ))}
                </div>

                <div className='flex justify-center flex-row gap-2'>
                    <button
                        onClick={handlePrev}
                        className="bg-White border w-[42px] h-[42px] border-plamev-blue-600 text-white p-2 rounded-full hover:bg-opacity-75 transition flex justify-center items-center"
                    >
                        <Image src={ArrowLeftCarroussel} alt='' />
                    </button>

                    <button
                        onClick={handleNext}
                        className="bg-White border w-[42px] h-[42px] border-plamev-blue-600 text-white p-2 rounded-full hover:bg-opacity-75 transition flex justify-center items-center"
                    >
                        <Image src={ArrowRithCarrousel} alt='' />
                    </button>
                </div>
            </div>
        </div>
    )
}

export default CarouselTestimonials;