import styled from 'styled-components'

const GalleryStyle = styled.div`
  border: 1px solid grey;

  #header {
    background: lightgray;
    cursor: pointer
  }
`

class Gallery extends React.Component {
  state = {
    galleryOpen: false
  }

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

  render() {
    const { items, title } = this.props
    return (
      <GalleryStyle>
        <div onClick={this.openGallery} id="header">
          {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