import React, { Component } from 'react';
import _ from 'lodash';
import Swing from 'react-swing';

import Title from '../Title';
import Polaroid from '../Polaroid';

import './Observations.css';
import polaroid from '../../theme/icons/polaroid.svg';
import trash from '../../theme/icons/trash.svg';
import book from '../../theme/icons/book.svg';
import feather from '../../theme/icons/feather.svg';
import classNames from '../../utils/classNames';

class Observations extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stack: null,
      animation: true,
      growTrash: false,
      growBook: false,
      config: {
        throwOutConfidence: (xOffset, yOffset, element) => {
          const xConfidence = Math.min((4 * Math.abs(xOffset)) / element.offsetWidth, 1);
          const yConfidence = Math.min((Math.abs(yOffset)) / (element.offsetHeight * 10), 1);
          if(xConfidence === 1){
            xOffset > 0? this.toggleBook() : this.toggleTrash();
          } else {
            this.setState({
              growBook: false,
              growTrash: false,
            })
          }
          return Math.max(xConfidence, yConfidence);
        },
      },
    };
  }

  vote(value) {
    this.toggleAnimation(this.state.animation);
    this.props.vote(value);
    this.setState({
      growBook: false,
      growTrash: false,
    })
    setTimeout(() => this.toggleAnimation(), 50);
  }

  toggleAnimation() {
    this.setState(({ animation }) => ({ animation: !animation }));
  }

  toggleTrash() {
    this.setState({ growTrash: true });
  }

  toggleBook() {
    this.setState({ growBook: true });
  }

  render() {
    const { observations, generateImageUrl, isDemo } = this.props;
    if (observations.length <= 0) {
      return (
        <div className="container Observations__Empty">
          <div className="Feather">
            <img src={feather} alt="Feather" />
          </div>
          <div className="col-lg-12">
            <h1>All the birds have flown for today!</h1>
            <p>Thank you so much for your contribution.</p>
            <p>
              Follow <a href="https://twitter.com/TodayBirds">@TodayBirds</a> on twitter or like the
              page <a href="https://www.facebook.com/TodayBirds/">Birds Today</a> on Facebook to
              keep track of all the pictures Bert takes.
            </p>
          </div>
        </div>
      );
    }

    const observation = _.head(observations);

    return (
      <div className="Observations">
        <Title name="Vote" />
        <div className="Observations__Top">
          <img className="Observations__PolaroidIcon" src={polaroid} alt="Polaroid camera" />
          {isDemo && (
            <div className="Observations__DemoText">
              {observation.demoText}
            </div>
          )}
          <Swing
            config={this.state.config}
            className="Observations__Swing"
            tagName="div"
            setStack={(stack) => this.setState({ stack })}
            throwoutleft={(e) => {
              this.vote(-1);
              this.state.stack.getCard(e.target).throwIn(0, 0);
            }}
            throwoutright={(e) => {
              this.vote(1);
              this.state.stack.getCard(e.target).throwIn(0, 0);
            }}
          >
            <div className="Observations__Picture">
              <Polaroid toggle={this.state.animation} img={generateImageUrl(observation.id)} />
            </div>
          </Swing>
        </div>
        <div className="Observations__Footer">
          <div className={classNames("Observations__Button", this.state.growTrash && "Observations__Button__Grow")} onClick={() => this.vote(-1)}>
            <img src={trash} alt="Trash" />
          </div>
          <div className={classNames("Observations__Button", this.state.growBook && "Observations__Button__Grow")} onClick={() => this.vote(1)}>
            <img src={book} alt="Book" />
          </div>
        </div>
      </div>
    );
  }
}

Observations.defaultProps = {
  isDemo: false,
};

export default Observations;

@@ -904,16 +904,17 @@
       if
+ 
 (xConfid
@@ -924,16 +924,17 @@
 e === 1)
+ 
 %7B%0A      
@@ -939,16 +939,20 @@
         
+if (
 xOffset 
@@ -958,9 +958,25 @@
  %3E 0
-?
+) %7B%0A             
  thi
@@ -993,10 +993,44 @@
 ok()
+;%0A            %7D else %7B%0A            
  
-:
  thi
@@ -1042,24 +1042,38 @@
 gleTrash();%0A
+            %7D%0A
           %7D 
@@ -1180,24 +1180,25 @@
           %7D)
+;
 %0A          %7D
@@ -1442,22 +1442,23 @@
  false,%0A
-
     %7D)
+;
 %0A    set
@@ -3672,33 +3672,33 @@
 ame=%7BclassNames(
-%22
+'
 Observations__Bu
@@ -3693,33 +3693,33 @@
 rvations__Button
-%22
+'
 , this.state.gro
@@ -3724,25 +3724,25 @@
 rowTrash && 
-%22
+'
 Observations
@@ -3747,33 +3747,33 @@
 ns__Button__Grow
-%22
+'
 )%7D onClick=%7B() =
@@ -3888,17 +3888,17 @@
 ssNames(
-%22
+'
 Observat
@@ -3909,17 +3909,17 @@
 __Button
-%22
+'
 , this.s
@@ -3935,17 +3935,17 @@
 Book && 
-%22
+'
 Observat
@@ -3962,17 +3962,17 @@
 on__Grow
-%22
+'
 )%7D onCli

fix lint errors