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

import { TEXT_OVERLAYS, DEFAULT_CLOSED_ICON, DEFAULT_ICON } from '../text-overlays.js'

import './text.overlay.css'

class TextOverlay extends Component {
  state = {
    open: false,
    content: null,
  }

  constructor(props) {
    super(props)
    this.toggle = this.toggle.bind(this)
  }

  componentDidMount() {
    this.load()
  }

  componentDidUpdate(prevProps) {
    // console.log(this.props.location.pathname, prevProps.location.pathname)
    if (this.props.location.pathname !== prevProps.location.pathname) {
      this.load()
    }
    if (
      this.props.popups !== prevProps.popups
      && this.state.content
      && this.state.content.popup
      && this.props.popups[this.state.content.popup]
      && this.state.content.audio_url
    ) {
      this.props.audio.player.stop("text-overlay")
      this.props.audio.player.playURL({
        id: "text-overlay",
        url: this.state.content.audio_url,
      })
    }
  }

  load() {
    const { page_name } = this.props.match.params
    this.props.audio.player.stop("text-overlay")
    if (TEXT_OVERLAYS[page_name]) {
      this.setState({
        content: TEXT_OVERLAYS[page_name],
        open: false,
      })
    } else {
      this.setState({
        content: null,
        open: false,
      })
    }
  }

  toggle() {
    this.setState({ open: !this.state.open })
  }

  render() {
    const { open, content } = this.state
    const { popups, interactive, language } = this.props
    if (!interactive || !content) return null
    if (content.popup && !popups[content.popup]) return null
    if (!content.popup && !open) {
      return (
        <div
          className="text-overlay-icon"
          style={content.style}
          onClick={this.toggle}
        >
          <img src={content.icon || (open ? DEFAULT_CLOSED_ICON : DEFAULT_ICON)} />
        </div>
      )
    }

    return (
      <div
        className="text-overlay"
        style={{
          ...(content.textStyle || {}),
        }}
        onClick={this.toggle}
        dangerouslySetInnerHTML={{ __html: content.text[language] || content.text.en }}
      />
    )
  }
}

const mapStateToProps = state => ({
  audio: state.audio,
  language: state.site.language,
  popups: state.site.popups,
  interactive: state.site.interactive,
})

export default connect(mapStateToProps)(TextOverlay)