import React from 'react'
import { ImageGalleryProps, ListProps } from './typings'
import {
  ImageGalleryWrapper,
  FigureItem,
  ImageWrapper,
  ImageItem,
} from './styled'

function defaultRenderItem(item: ListProps) {
  const { label, value, index } = item
  return (
    <FigureItem title={label} key={index}>
      <ImageWrapper>
        <ImageItem src={value} alt={label} nowrap />
      </ImageWrapper>
    </FigureItem>
  )
}

function defaultRenderList(props: ImageGalleryProps) {
  const { list, renderItem } = props
  const boxView = list.map((item, index) => renderItem({ index, ...item }))
  return boxView
}

function defaultRenderWrapper(props: ImageGalleryProps) {
  const { className } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
  })
  return (
    <ImageGalleryWrapper {...passThroughProps}>
      {defaultRenderList(props)}
    </ImageGalleryWrapper>
  )
}

export { defaultRenderWrapper, defaultRenderItem, defaultRenderList }