import styled from 'styled-components'

const GalleryStyle = styled.div`
  border: 1px solid ${props => props.theme.lightblue};
  margin-bottom: 1.5em;

  #header {
    padding: 0 0.3em;
    background-color: ${props => props.theme.lighterblue};
    color: ${props => props.theme.darkblue};
    cursor: pointer;
  }
`

class Gallery extends React.Component {
  state = {
    galleryOpen: this.props.galleryOpen ? !!this.props.galleryOpen : true
  }

  openGallery = event => {
    this.setState({ galleryOpen: !this.state.galleryOpen })
  }

  render () {
    const { items, title } = this.props
    return (
      <GalleryStyle>
        <div onClick={this.openGallery} id='header'>
          {this.state.galleryOpen ? <span>&#8259;</span> : <span>&#8227;</span>}{' '}
          {items.length} {title} available (click to{' '}
          {this.state.galleryOpen ? 'hide' : 'see'})
        </div>
        <div
          style={{ display: this.state.galleryOpen ? 'block' : 'none' }}
          id='gallery'
        >
          {items}
        </div>
      </GalleryStyle>
    )
  }
}

export default Gallery