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

import actions from 'app/actions'

import { EfluxClose } from '../nav/eflux.icons'
import { Arrow } from '../nav/viewer.icons'

class HandheldModal extends Component {
  state = {
    visible: false,
  }
  componentDidUpdate(prevProps) {
    if (prevProps.showAtEndOfSection !== this.props.showAtEndOfSection && this.props.showAtEndOfSection) {
      this.setState({ visible: true })
    }
  }
  render() {
    const { showAtEndOfSection } = this.props
    const { visible } = this.state
    console.log(showAtEndOfSection, visible)
    return (
      <div className={(showAtEndOfSection && visible) ? "modal handheld-modal visible" : "modal handheld-modal"}>
        <div>
          <p>
            {"The full episode is not currently supported on mobile devices."}
          </p>
          <p>
            {"To continue viewing, please switch to your computer."}
          </p>
          <div onClick={() => this.setState({ visible: false })} className='ok'>OK</div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  showAtEndOfSection: state.viewer.onlyEnableFirstSection && state.viewer.atEndOfSection,
})

export default connect(mapStateToProps)(HandheldModal)