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

interface IImagesViewerProps {
  /** 图片列表 */
  images: string[];
  /** 当前所在滑块的 index */
  current?: number;
  /** 取消事件 */
  onCancel: () => void;
}

/**
 * 图片/图文查看组件
 */
const ImagesViewer: React.FC<IImagesViewerProps> = ({
  images = [],
  current = 0,
  onCancel = () => {},
}) => {
  const [num, setNum] = useState<number>(current);
  return (
    <View className='wm-images-viewer' onClick={() => onCancel()}>
      {images?.length > 0 && (
        <Fragment>
          <View className='current'>
            {num + 1}/{images?.length || 1}
          </View>
          <Swiper
            onChange={(e) => setNum(e.detail.current)}
            className='images'
            circular
            current={current}>
            {images.map((image, index) => (
              <SwiperItem className='item' key={index}>
                <Image className='img' src={image} />
              </SwiperItem>
            ))}
          </Swiper>
        </Fragment>
      )}
    </View>
  );
};

export default ImagesViewer;