import Carousel from '@/components/organisms/layout/Carousel';
import useLightBox from '@/hooks/useLightBox';
import Plyr from 'plyr-react';
import { FC } from 'react';
import play from '@/../public/images/layout/play.svg';
import Image from 'next/image';
// -------- data -------- //

interface GalleryCarouselProps {
  darkColor?: string;
  lightColor?: string;
  elements?: any[];
}

const GalleryCarousel: FC<GalleryCarouselProps> = (props) => {
  const { darkColor = '', lightColor = '', elements } = props;
  useLightBox();
  const swiperStyles: React.CSSProperties & {
    '--swiper-navigation-size'?: string;
    '--swiper-navigation-top-offset'?: string;
    '--swiper-theme-color'?: string;
    '--swiper-pagination-color'?: string;
    '--swiper-pagination-bottom'?: string;
    '--swiper-navigation-sides-offset'?: string;
    '--swiper-pagination-bullet-inactive-color'?: string;
    '--swiper-pagination-bullet-inactive-opacity'?: string;
  } = {
    '--swiper-navigation-size': '30px',
    '--swiper-navigation-top-offset': '90%',
    '--swiper-theme-color': darkColor,
    '--swiper-pagination-bullet-inactive-color': darkColor,
    '--swiper-pagination-bullet-inactive-opacity': '1',
    '--swiper-pagination-bottom': '-5px',
    '--swiper-navigation-sides-offset': '27%'
  };
  return (
    <section id="gallery-carousel" className="tw-pl-4 pb-7 pb-md-14">
      <div className="wrapper overflow-hidden">
        <div className="container-fluid">
          <div className="swiper-container swiper-auto">
            {(elements && (
              <Carousel
                // style={swiperStyles}
                className="overflow-visible"
                grabCursor
                slidesPerView="auto"
                // centeredSlides
                loop
                breakpoints={{ 0: { slidesPerView: 1.5 }, 1200: { slidesPerView: 2.5 } }}
              >
                {elements.map((item, key) => (
                  <figure key={key}>
                    <a href={item?.media?.url} data-glightbox data-gallery="gallery-group">
                      {!item?.type ||
                        (item?.type === 'image' && <img src={item?.media?.url} alt="" className="-image 
                          !tw-max-h-[418px] md:!tw-h-[50vh] tw-object-cover" />) ||
                        ''}
                      {!item?.type ||
                        (item?.type === 'video' && (
                          <div className="tw-relative tw-h-full ">
                            <Image
                              src={play}
                              alt="play"
                              className="tw-max-w-[44px]  md:tw-max-w-[88px] tw-absolute tw-z-10 tw-top-0 tw-bottom-0 tw-my-auto tw-left-0 tw-right-0 tw-mx-auto"
                            />
                            <Plyr
                              options={{
                                clickToPlay: false,
                                controls: [],
                                autoplay: false,
                                muted: true
                              }}
                              source={{ type: 'video', sources: [{ src: item?.media?.url }] }}
                            />
                          </div>
                        )) ||
                        ''}
                    </a>
                  </figure>
                ))}
              </Carousel>
            )) ||
              ''}
          </div>
        </div>
      </div>
    </section>
  );
};

export default GalleryCarousel;