import React from 'react'

import { Swiper, SwiperItem } from '@tarojs/components'
import type { SwiperProps, ImageProps } from '@tarojs/components'

import { LxBox, LxImage } from '../index'

import './index.less'

export interface ISwiperImage {
  thumbnail_image: string
  image: string
}

/**
 * 自定义 props 剩下数学用法，请参考
 */
export interface ILxSwiperImagesProps extends SwiperProps {
  width: number | string
  height: number
  images: ISwiperImage[]
  mode?: keyof ImageProps.Mode
}

export function LxSwiperImages (props: ILxSwiperImagesProps) {
  const {
    width,
    height,
    images,
    mode,
    ...restProps
  } = props

  return (
    <LxBox width={width} height={height}>
      <Swiper className="lx-swiper" {...restProps} >
        {
          images.map((item, index) => (
            <SwiperItem key={`${item.thumbnail_image}_${index}`}>
              <LxImage mode={mode} className="lx-swiper__image" src={item.thumbnail_image} />
            </SwiperItem>
          ))
        }
      </Swiper>
    </LxBox>
  )
}