import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { ReactTabulator } from 'react-tabulator'

import { toArray, toTuples, domainFromUrl } from '../util'
import { Loader } from '../common'

import csv from 'parse-csv'

class ModalImage extends Component {
  state = {
    visible: false,
    images: [],
    index: 0,
  }
  
  componentDidMount() {
    const images = toArray(document.querySelectorAll('.image img'))
    // console.log(images)
    images.forEach((img, i) => {
      img.addEventListener('click', () => this.loadImage(i))
    })
    this.setState({ images })
    document.body.addEventListener('keydown', e => {
      if (document.activeElement && document.activeElement !== document.body) {
        return null
      }
      console.log(e.keyCode)
      switch (e.keyCode) {
        case 27: // esc
          this.close()
          break
        case 37: // left
          this.prev()
          break
        case 39: // right
          this.next()
          break
        default:
          break
      }
    })
  }

  loadImage(index) {
    const { images } = this.state
    if (!images.length) return
    if (index < 0 || index >= images.length) return
    this.setState({ visible: true, index })
  }

  prev() {
    const { index, images } = this.state
    if (!images.length) return
    this.setState({ index: (images.length + index - 1) % images.length })
  }

  next() {
    const { index, images } = this.state
    if (!images.length) return
    this.setState({ index: (index + 1) % images.length })
  }

  close() {
    this.setState({ visible: false })
  }

  render() {
    const { images, index, visible } = this.state
    if (!images.length) return null
    const img = images[index]
    let caption = null
    const sib = img.nextSibling
    if (sib && sib.classList.contains('caption')) {
      caption = sib.innerText
    }
    return (
      <div className={visible ? 'modal visible' : 'modal'}>
        <div className='inner'>
          <div className='centered'>
            <img src={img.src} />
            {caption && <div class='caption'>{caption}</div>}
          </div>
        </div>
        <div onClick={() => this.prev()} className='prev' aria-label='Previous image' alt='Previous image'><img src='/assets/img/arrow-left.png' /></div>
        <div onClick={() => this.next()} className='next' aria-label='Next image' alt='Next image'><img src='/assets/img/arrow-right.png' /></div>
        <div onClick={() => this.close()} className='close' aria-label='Close' alt='Close'><img src='/assets/img/close.png' /></div>
      </div>
    )
  }
}
export default ModalImage