import React, { useRef, useState, useEffect } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Controller, EffectCoverflow, Navigation } from 'swiper';
SwiperCore.use([EffectCoverflow]);
// import 'swiper/swiper.min.css';
import 'swiper/swiper.less';
import 'swiper/components/effect-coverflow/effect-coverflow.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { listVideo } from '@/services/cms';
import { useRequest } from '@@/plugin-request/request';

const Show: React.FC = () => {
  const [currentIndex, setCurrentIndex] = useState(2);

  const { data: videoUrlList } = useRequest(async () => {
    const listVidioResult = await listVideo(1, 100);
    setCurrentIndex(listVidioResult?.data.total - 1);
    return listVidioResult;
  });
  const videosRef = useRef([]);
  const [swiper, setSwiper] = useState<Swiper>();
  const pauseOtherVideos = () => {
    const video = document.getElementsByClassName('video');
    const elementsArray = Array.from(video);
    if (elementsArray) {
      elementsArray.forEach((element) => {
        element.pause();
      });
    }
  };

  const handleVideoRef = (video: any, index: number) => {
    videosRef.current[index] = video;
  };

  return (
    <div className="company-show">
      <div className="show-container">
        <div className="show-content">
          <div className="show-title">走近高潜</div>
        </div>
        <div className="video-wrapper">
          <LeftOutlined
            className="video-nav"
            onClick={() => {
              swiper?.slidePrev();
            }}
          />

          <div className="show-videos">
            <Swiper
              effect={'coverflow'}
              loop={true}
              coverflowEffect={{
                rotate: 0,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: false,
              }}
              initialSlide={1}
              slidesPerView={1.5}
              centeredSlides={true}
              onSlideChange={(swiper) => {
                setCurrentIndex(swiper.realIndex);
                pauseOtherVideos();
              }}
              onSwiper={(swiper) => {
                setSwiper(swiper);
              }}
            >
              {videoUrlList?.records
                ?.sort((b, c) => {
                  return Date.parse(b.createTime) - Date.parse(c.createTime);
                })
                .map((item, index) => {
                  return (
                    <SwiperSlide key={item.id || index}>
                      <video
                        ref={(video) => handleVideoRef(video, index)}
                        className="video"
                        src={item.url}
                        controls={currentIndex == index}
                        poster={`${item.url}?x-oss-process=video/snapshot,t_5000,m_fast`}
                        autoPlay={false}
                      ></video>
                    </SwiperSlide>
                  );
                })}
            </Swiper>
          </div>
          <RightOutlined
            className="video-nav"
            onClick={() => {
              swiper?.slideNext();
            }}
          />
        </div>
      </div>
      <div className="show-background"></div>
    </div>
  );
};

export default Show;
