import React, { Component } from 'react'

import { CURTAIN_COLOR_LOOKUP } from 'app/constants'

export const Grid = ({ media, annotation }) => {
  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
  const style = {
    // backgroundColor: color.backgroundColor,
    // color: color.textColor,
  }
  // console.log(display_lookup)
  // console.log(width)
  return (
    <div style={style} className='grid-container'>
      {image_order.map(id => {
        const image = display_lookup[id]
        const caption = (caption_lookup && caption_lookup[id]) || {}
        // console.log(image)
        return (
          <GridItem key={id} image={image} caption={caption} />
        )
      })}
    </div>
  )
}

const GridItem = ({ image, caption }) => {
  // console.log(image)
  return (
    <div className='grid-item'>
      <div className='grid-image'>
        <img src={image.url} />
      </div>
      {caption.caption && (
        <div className='grid-caption'>
          {caption.caption}
        </div>
      )}
    </div>
  )
}