/**
 * React Static Boilerplate
 * https://github.com/koistya/react-static-boilerplate
 * Copyright (c) Konstantin Tarkus (@koistya) | MIT license
 */

import React, { Component } from 'react'
import { Provider, connect } from 'react-redux'
import Store from '../store/store.js'
import * as Actions from '../actions'
import Swipeable from 'react-swipeable'
import url from 'url'
import config from '../config'
import '../style/index.scss'

// TODO: Is this being used?
// import injectTapEventPlugin from 'react-tap-event-plugin'
// injectTapEventPlugin()

import AllCardsButton from '../components/buttons/AllCardsButton'
import Card from '../components/Card'
import CardMetadata from '../components/CardMetadata'
import DeckCover from '../components/DeckCover'
import DeckList from '../components/DeckList'
import CardNavigation from '../components/CardNavigation'
import { getUserMetadata } from '../utils/utils';

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      decks: {},
      selectedDeck: null
    }
  }

  componentDidMount() {

    let query = url.parse(window.location.toString(), true).query
    let googleSheetId = query.id || '1gjMUw1XFuFAhU1DFCEcIg7HY980pnc6fFy7OKSKV09U'
    this.props.dispatch(Actions.fetchCards(googleSheetId))
    window.FastClick.attach(document.body)

  }

  render() {
    const userMetadata = getUserMetadata(this.props.decks.info);
    if (typeof document !== 'undefined') {
      document.title = userMetadata.title || config.title;
    }

    if (this.props.selectedDeck) {

      let deckId = this.props.selectedDeck
      let deck = this.props.decks[deckId]
      let card = deck.cards[deck.currentCardIndex]
      let unansweredOrWrongCards = deck.cards.filter((card) => {
        return card.lastAnsweredRight !== true
      })

      let hasAnsweredAllCorrectly = false

      if (unansweredOrWrongCards.length === 0) {
        hasAnsweredAllCorrectly = true
      }

      function onFlip() {
        this.props.dispatch(Actions.markAsSeen(card.id))
      }

      function onSeen() {
        console.log.bind(console, 'Card@onSeen')
      }

      function onAnsweredCorrectly() {
        this.props.dispatch(Actions.markAnsweredRight(card.id))
        this.props.dispatch(Actions.gotoNextCard(deckId))
      }

      function onAnsweredIncorrectly() {
        this.props.dispatch(Actions.markAnsweredWrong(card.id))
        this.props.dispatch(Actions.gotoNextCard(deckId))
      }

      function onSkip() {
        this.props.dispatch(Actions.gotoNextCard(deckId))
      }

      function onBackToAllDecks() {
        this.props.dispatch(Actions.updateSelectedDeck(null))
      }

      return (
        <div className="card-and-nav" style={{background: deck.isInRerunMode ? 'yellow' : 'transparent'}}>
          <div className="card-and-nav-inner">
            <CardNavigation cards={deck.cards} currentCardIndex={deck.currentCardIndex}/>
            <Swipeable
              onSwipedDown={onSkip.bind(this)}
              onSwipedLeft={onAnsweredIncorrectly.bind(this)}
              onSwipedRight={onAnsweredCorrectly.bind(this)}
              onSwipedUp={onBackToAllDecks.bind(this)}>
                <Card
                  key={card.id}
                  cardIndex={deck.currentCardIndex}
                  totalCards={deck.cards.length}
                  hasAnsweredAllCorrectly={hasAnsweredAllCorrectly}
                  onFlip={() => {this.props.dispatch(Actions.markAsSeen(card.id))}}
                  onSeen={console.log.bind(console, 'Card@onSeen')}
                  onAnsweredCorrectly={onAnsweredCorrectly.bind(this)}
                  onAnsweredIncorrectly={onAnsweredIncorrectly.bind(this)}
                  onSkip={onSkip.bind(this)}
                  onBackToAllDecks={onBackToAllDecks.bind(this)}
                  {...card} />
            </Swipeable>
            <CardMetadata {...card} />
          </div>
        </div>
      )
    } else {
      return <DeckList
        onSelectDeck={(deckId) => {this.props.dispatch(Actions.updateSelectedDeck(deckId))}}
        decks={this.props.decks} />
    }
  }
}

function select(state) {
  return state
}

// Wrap the component to inject dispatch and state into it
export default connect(select)(App)

@@ -2690,16 +2690,247 @@
 eturn (%0A
+        %3CSwipeable%0A          onSwipedDown=%7BonSkip.bind(this)%7D%0A          onSwipedLeft=%7BonAnsweredIncorrectly.bind(this)%7D%0A          onSwipedRight=%7BonAnsweredCorrectly.bind(this)%7D%0A          onSwipedUp=%7BonBackToAllDecks.bind(this)%7D%3E%0A  
         
@@ -3030,32 +3030,34 @@
 t'%7D%7D%3E%0A          
+  
 %3Cdiv className=%22
@@ -3085,24 +3085,26 @@
             
+ 
+ 
 %3CCardNavigat
@@ -3175,255 +3175,8 @@
 %3E%0A  
-          %3CSwipeable%0A              onSwipedDown=%7BonSkip.bind(this)%7D%0A              onSwipedLeft=%7BonAnsweredIncorrectly.bind(this)%7D%0A              onSwipedRight=%7BonAnsweredCorrectly.bind(this)%7D%0A              onSwipedUp=%7BonBackToAllDecks.bind(this)%7D%3E%0A
     
@@ -3211,16 +3211,18 @@
         
+ 
+ 
 key=%7Bcar
@@ -3227,16 +3227,18 @@
 ard.id%7D%0A
+  
         
@@ -3281,16 +3281,18 @@
 dIndex%7D%0A
+  
         
@@ -3342,32 +3342,34 @@
                 
+  
 hasAnsweredAllCo
@@ -3402,16 +3402,18 @@
 rectly%7D%0A
+  
         
@@ -3502,24 +3502,26 @@
             
+  
 onSeen=%7Bcons
@@ -3558,16 +3558,18 @@
 Seen')%7D%0A
+  
         
@@ -3641,32 +3641,34 @@
                 
+ 
+ 
 onAnsweredIncorr
@@ -3726,16 +3726,18 @@
         
+  
 onSkip=%7B
@@ -3773,16 +3773,18 @@
         
+ 
+ 
 onBackTo
@@ -3840,16 +3840,18 @@
         
+  
 %7B...card
@@ -3861,31 +3861,8 @@
 %3E%0A  
-          %3C/Swipeable%3E%0A
     
@@ -3898,32 +3898,34 @@
 d%7D /%3E%0A          
+  
 %3C/div%3E%0A        %3C
@@ -3919,31 +3919,54 @@
 iv%3E%0A        
+  
 %3C/div%3E%0A
+        %3C/Swipeable%3E%0A
       )%0A    

Make whole card swipeable