ReactModal.setAppElement('#app')

const client = SanityClient({
  projectId: "anokeucs",
  dataset: "production",
  useCdn: true
})
const query = `*[_type == 'post' && defined(mainImage)]{ 
    ...,
    "mainImage": mainImage.asset->
  }`

class ImageExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      result: [],
      showModal: ''
    }
    this.openDialog = this.openDialog.bind(this)
    this.closeDialog = this.closeDialog.bind(this)
  }
  openDialog(_id) {
    this.setState({ showModal: _id })
  }
  closeDialog(_id) {
    this.setState({ showModal: '' })
  }

  componentDidMount() {
    client.fetch(query).then((result = []) => this.setState({ result }))
  }
  render() {
    const { result = [] } = this.state
    if (!result.length) return <div>Loading...</div>
    return (
      <div className="container">
        {result.map(({ _id, mainImage }) => (
          <div
            key={_id}
            className="card"
            style={{
              backgroundColor: mainImage.metadata.palette.dominant.background,
              color: mainImage.metadata.palette.dominant.foreground
            }}
          >
            <figure>
              <img src={`${mainImage.url}?w=800`} />
              <div className="figure__overlay">
                {mainImage.metadata.palette.dominant.foreground}
              </div>
            </figure>
            <button onClick={() => this.openDialog(_id)}>
              Inspect metadata
            </button>
            <ReactModal
              isOpen={this.state.showModal === _id}
              contentLabel="Minimal Modal Example"
              id={_id}
              OnAfterClose={() => document.body.style.overflow = 'hidden' }
OnRequestClose={() => document.body.removeAttribute('style') }
              className="metadata"
            >
              <button onClick={() => this.closeDialog(_id)}>Close</button>

              <pre>{JSON.stringify(mainImage, null, 2)}</pre>
            </ReactModal>
          </div>
        ))}
      </div>
    )
  }
}

ReactDOM.render(<ImageExample />, document.getElementById("app"))