import VmsVideo from '@wisdom-components/VmsVideo';
import { Modal, Space } from 'antd';
import React, { useState } from 'react';
import SwiperCore, { Autoplay, Lazy, Navigation, Pagination, Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';
import styles from './index.less';

SwiperCore.use([Virtual, Navigation, Lazy, Autoplay, Pagination]);

const VideoSliderModal = (props) => {
  const { modalInfo, videoInfos, JessibucaObj } = props;
  const [swiper, setSwiper] = useState(null);
  const [activeIndex, setActiveIndex] = useState(0);

  const handleNavigation = (direction) => {
    if (swiper) {
      if (direction === 'prev') {
        swiper.slidePrev();
      } else if (direction === 'next') {
        swiper.slideNext();
      }
    }
  };

  const handlePaginationClick = (index) => {
    setActiveIndex(index);
    if (swiper) {
      swiper.slideTo(index);
    }
  };

  // 默认配置
  const _JessibucaObj = {
    operateBtns: {
      screenshot: false,
    },
    loadingText: '视频加载中',
    decoder: '/JessibucaVideo/decoder.js',
    ...JessibucaObj,
  };

  return (
    <Modal
      footer={null}
      width={1000}
      title="视频预览"
      {...modalInfo}
      wrapClassName={styles['video-carousel-modal']}
      bodyStyle={{ padding: 0 }}
      getContainer={document.body}
      destroyOnClose
    >
      <Swiper
        onSwiper={setSwiper}
        slidesPerView={1}
        spaceBetween={0}
        pagination={{
          clickable: true,
        }}
        loop
        lazy
        virtual
        onActiveIndexChange={(e) => {
          setActiveIndex(e.activeIndex);
        }}
        navigation
      >
        {videoInfos.map((item, index) => (
          <SwiperSlide key={index}>
            <div className={styles['swiper-wrap']}>
              <div className={styles['swiper-title']}>{item.name}</div>
              <div className={styles['swiper-content']}>
                <VmsVideo VideoInfo={item} JessibucaObj={_JessibucaObj} />
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      <div className={styles['swiper-dots-wrap']}>
        <Space size={16}>
          {videoInfos.map((video, index) => (
            <div
              className={styles['swiper-dots']}
              key={index}
              onClick={() => handlePaginationClick(index)}
              style={{ background: activeIndex === index ? '#007aff' : '#919090' }}
            />
          ))}
        </Space>
      </div>
    </Modal>
  );
};

export default VideoSliderModal;
