import { h, Component } from 'preact'
import PreactCSSTransitionGroup from 'preact-css-transition-group'

import AppConstants from '../constants/AppConstants'
import ActionType from '../constants/ActionType'
import DaySort from '../constants/DaySort'
import Settings from '../constants/Settings'

import App from '../components/App'
import ImageWrapper from '../components/ImageWrapper'
import Info from '../components/Info'
import Nav from '../components/Nav'
import Overlay from '../components/Overlay'
import Footer from '../components/Footer'

import LoadingContainer from './LoadingContainer'
import Failure from '../components/Failure'

import disableHoverEffectsOnMobile from '../helpers/disable-hover-effects-on-mobile'
import getByDate from '../helpers/get-by-date-bridge'
import shuffleDate from '../helpers/shuffle-date'
import tomorrow from '../helpers/tomorrow'
import yesterday from '../helpers/yesterday'
const downloadImage = new Image()

class AppContainer extends Component {
  constructor(props){
    super(props)
    this.state = {
      showInfo: false,
      showOverlay: false,
      tries: 0,
      isFailure: false,
      isLoading: true
    }

    this.handlePreviousClick = this.handlePreviousClick.bind(this)
    this.handleNextClick = this.handleNextClick.bind(this)
    this.handleToggleClick = this.handleToggleClick.bind(this)
    this.handleShuffleClick = this.handleShuffleClick.bind(this)
    this.handleHomeClick = this.handleHomeClick.bind(this)
    this.handleImageClick = this.handleImageClick.bind(this)
    this.handleOverlayClick = this.handleOverlayClick.bind(this)
  }

  makeRequest(currentDate, type){
    let date

    switch(type) {
      case ActionType.NEWEST:
        date = currentDate
        type = ActionType.LATEST
        DaySort.LATEST = date
        break
      case ActionType.LATEST:
        date = yesterday(currentDate)
        DaySort.LATEST = date
        break
      case ActionType.PREVIOUS:
         date = yesterday(currentDate)
        break
      case ActionType.NEXT:
        date = tomorrow(currentDate)
        break
      case ActionType.SHUFFLE:
        date = shuffleDate()
        break
    }

    getByDate(date)
      .then(this.receive.bind(this, date))
      .catch(err => this.handleRejection.bind(this, err, date, type)())
  }

  receive(date, data){
    const update = () => {
      this.setState({
        image: data.url,
        image_hd: data.hdurl,
        title: data.title,
        explanation: data.explanation,
        date: date,
        tries: 0,
        isFailure: false,
        isLoading: false
      })
    }

    if (Settings.IMAGE_SYNC) {
      downloadImage.onload = update
      downloadImage.src = data.hdurl
    } else {
      update()
    }
  }

  handleRejection(err, date, type){
    if (this.state.tries >= AppConstants.MAX_TRY)  {
      this.setState({
        isFailure: true,
        isLoading: false
      })
    } else {
      this.setState({
        tries: this.state.tries + 1
      }, this.makeRequest(date, type))
    }
  }

  handleHomeClick(){
    this.setState({
      isLoading: true
    }, this.makeRequest(DaySort.NEWEST, ActionType.NEWEST))
  }

  handlePreviousClick(){
    this.setState({
      isLoading: true
    }, this.makeRequest(this.state.date, ActionType.PREVIOUS))
  }

  handleShuffleClick(){
    this.setState({
      isLoading: true
    }, this.makeRequest(this.state.date, ActionType.SHUFFLE))
  }

  handleNextClick(){
    this.setState({
      isLoading: true
    }, this.makeRequest(this.state.date, ActionType.NEXT))
  }

  handleToggleClick(){
    this.setState({
      showInfo: !this.state.showInfo
    })
  }

  handleImageClick(e){
    e.preventDefault()

    this.setState({
      showOverlay: true
    })
  }

  handleOverlayClick(e){
    if (e.target.id === 'frame-image') return

    this.setState({
      showOverlay: false
    })
  }

  render() {
    let component
    if (this.state.isLoading) component = <LoadingContainer key="loading-key" />
    if (this.state.isFailure) component = <Failure key="failure-key" tries={this.state.tries} />

    if (!component) {
      component = (
        <App key='app-key'>
          <Nav
            date={this.state.date}
            showInfo={this.state.showInfo}
            onHomeClick={this.handleHomeClick}
            onPreviousClick={this.handlePreviousClick}
            onShuffleClick={this.handleShuffleClick}
            onNextClick={this.handleNextClick}
            onToggleClick={this.handleToggleClick}
          />

          <ImageWrapper
            imageUrl={this.state.image_hd}
            onImageClick={this.handleImageClick}
          />
          
          <Info
            showInfo={this.state.showInfo}
            explanation={this.state.explanation}
          />

          <Footer
            showInfo={this.state.showInfo}
            date={this.state.date}
            title={this.state.title}
          />

          <Overlay
            imageUrl={this.state.image_hd}
            showOverlay={this.state.showOverlay}
            onOverlayClick={this.handleOverlayClick}
          />

        </App>
      )
    }

    return (
      <div>
        <PreactCSSTransitionGroup
          className='content'
          transitionName="fade"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={500}>
          {component}
        </PreactCSSTransitionGroup>
      </div>
    )
  }

  componentWillMount(){
    disableHoverEffectsOnMobile(window)

    this.makeRequest(DaySort.NEWEST, ActionType.NEWEST)
  }
}

export default AppContainer

@@ -1637,24 +1637,25 @@
 ate, type)%7B%0A
+%0A
     let date
@@ -2162,24 +2162,84 @@
 reak%0A    %7D%0A%0A
+    this.setState(%7B %0A      showInfo: false%0A    %7D, () =%3E %7B%0A  
     getByDat
@@ -2242,24 +2242,26 @@
 yDate(date)%0A
+  
       .then(
@@ -2297,16 +2297,18 @@
 )%0A      
+ 
+ 
 .catch(e
@@ -2365,16 +2365,23 @@
 ype)())%0A
+    %7D)%0A
   %7D%0A%0A  r
@@ -4016,16 +4016,24 @@
 Loading)
+ %7B%0A     
  compone
@@ -4072,24 +4072,30 @@
 ing-key%22 /%3E%0A
+    %7D%0A
     if (this
@@ -4111,16 +4111,24 @@
 Failure)
+ %7B%0A     
  compone
@@ -4183,24 +4183,31 @@
 e.tries%7D /%3E%0A
+    %7D%0A%0A
 %0A    if (!co

reset showInfo