import {
  Image,
  Swiper,
  SwiperItem,
  View,
  Text,
  Video,
} from '@tarojs/components';
import React, { Fragment, useState } from 'react';
import className from 'classnames';

const playIcon =
  'https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/components/images/image-slider/icon-play.png';
const closeIcon =
  'https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/components/images/image-slider/icon-close.png';
const noImg =
  'https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/components/images/image-slider/icon-no-img.png';

interface ImageSliderProps {
  /** 图片列表 */
  slideImages: string[];
  /** 类型 */
  type?: 'normal' | 'flat';
  /** 视频地址 */
  videoUrl?: string;
  /** 点击回调 **/
  onClick?: (index: number) => void;
}

/**
 * 轮播图组件
 */
const ImageSlider: React.FC<ImageSliderProps> = ({
  slideImages = [],
  type = 'normal',
  videoUrl = '',
  onClick = (_index: number) => {},
}) => {
  const [num, setNum] = useState<number>(0);
  const [showVideo, setShowVideo] = useState<boolean>(false);

  const swiperBox = className(
    'swiper-box',
    type === 'flat' && 'swiper-box-flat',
  );

  const renderVideo = () => {
    return (
      !(showVideo || type === 'flat') && (
        <View className='bottom-page'>
          {!!videoUrl && (
            <View
              className='play-btn'
              style={
                process.env.TARO_ENV === 'weapp'
                  ? { top: '4px', position: 'relative' }
                  : {}
              }
              onClick={() => {
                setShowVideo(true);
              }}>
              <Image className='play' src={playIcon} />
            </View>
          )}
          <View className='slider-count'>
            <Text className='text'>
              {num + 1}
              <Text className='num'>
                /{slideImages.length ? slideImages.length : 1}
              </Text>
            </Text>
          </View>
        </View>
      )
    );
  };

  return (
    <View className='wm-image-slider'>
      <Fragment>
        {showVideo ? (
          <View className='video-box'>
            <Image
              src={closeIcon}
              className='close'
              onClick={() => setShowVideo(false)}
            />
            <Video
              autoplay={false} //是否自动播放
              src={videoUrl}
              className='img'
              showFullscreenBtn={false}
            />
          </View>
        ) : slideImages?.length > 0 ? (
          <Fragment>
            <Swiper
              onChange={(e) => setNum(e.detail.current)}
              onClick={() => onClick(num)}
              className={swiperBox}
              // circular 此处注释是为了解决商品详情页 swiper组件开启衔接滑动导致dom频繁更新调用oss图片接口
              >
              {slideImages.map((image, index) => (
                <SwiperItem className='item' key={index}>
                  <Image className='img' src={image} />
                </SwiperItem>
              ))}
            </Swiper>
            {renderVideo()}
          </Fragment>
        ) : (
          <View className='swiper-box'>
            <View className='item'>
              <Image className='img' src={noImg} />
            </View>
            {renderVideo()}
          </View>
        )}
      </Fragment>
    </View>
  );
};

export default ImageSlider;