import React, { PropTypes } from 'react';
import { Layer, Rect, Stage } from 'react-konva';
import { RECT, CIRC, LINE } from 'vclub/constants/whiteboardElements';
import { addNewFigure } from 'vclub/redux/club/whiteboard';

// import compose from 'recompose/compose';
// import { connect } from 'react-redux';

// ! dispatch as props

// import { addNewFigure } from 'vclub/redux/club/whiteboard';
// ! addNewFigure as props

import { BoardRect, BoardCircle, BoardLine } from '../figures';
import { backgroundColor, getColor } from '../colors';
import styles from './WhiteBoard.css';

function renderFigure(figureParam) {
  // null & undefined cases?
  const { typeNumber } = figureParam;
  switch (typeNumber) {
    case RECT:
      return <BoardRect {...figureParam} />;
    case CIRC:
      return <BoardCircle {...figureParam} />;
    case LINE:
      return <BoardLine {...figureParam} />;
    default:
      return null;
  }
}

class WhiteBoard extends React.Component {
  constructor() {
    super();
    this.state = {
      // 0 - Rect
      // 1 - Line
      // 2 - Ellipse
      // will be set to null for not figures
      nextFigureType: null,
      // will be true after mouseDown
      // will be false after mouseUp
      listenForMouseMove: false,
      // figures to render
      figure: {},
    };
  }

  onMouseUp = () => {
    console.log("mouse up");

    const { dispatch } = this.props;
    const { figure } = this.state;

    console.log(this.state)
    console.log(addNewFigure.toString());
    if (this.props.nextFigureType !== null) {
      dispatch(addNewFigure(figure));
      this.setState({
        listenForMouseMove: false,
        figure: null,
      });
    }
  }

  onMouseDown = (evt) => {
    // console.log("mouse down")
    // console.log(evt);
    const { nextFigureType } = this.props;

    const { evt: {
      offsetX, offsetY,
    } } = evt;

    if (nextFigureType !== null) {
      // console.log("listenForMouseMove");
      this.setState({
        // now we listen for mouse move
        listenForMouseMove: true,
        // set first coordinate of new figure
        figure: {
          typeNumber: nextFigureType,
          x: offsetX,
          y: offsetY,
          x1: 0,
          x2: 0,
          color: getColor(),
        },
      });
    }
  }

  onMouseMove = (evt) => {
    const { evt: {
      offsetX, offsetY,
    } } = evt;

    // console.log(this.state.listenForMouseMove)
    if (this.state.listenForMouseMove === true) {
      // console.log("move")
      this.setState(prevState => ({
        ...prevState,
        figure: {
          ...prevState.figure,
          x1: offsetX,
          y1: offsetY,
        },
      }));
      // console.log(this.state.figure);
    }
  }

  render() {
    // console.log("Hello")
    const { props, state } = this;
    const { figures } = props;
    const { figure } = state;
    console.log("NEXT FIGURE TYPE");
    console.log(this.props.nextFigureType);
    console.log("FIGURE");
    return (
      <div className={styles.whiteBoard}>
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <Layer
            listening
            onMouseMove={this.onMouseMove}
            onMouseDown={this.onMouseDown}
            onMouseUp={this.onMouseUp}
          >
            <Rect x="0" y="0" width={window.innerWidth} height={window.innerHeight} fill={backgroundColor} />
            {figures.map(renderFigure)}
            {renderFigure(figure)}
          </Layer>
        </Stage>
      </div>
    );
  }
}

WhiteBoard.propTypes = {
  dispatch: PropTypes.func,
  nextFigureType: PropTypes.number,
};

export default WhiteBoard;

@@ -644,16 +644,58 @@
  cases?%0A
+  if (figureParam === null) return null;%0A%0A
   const 
@@ -1383,38 +1383,8 @@
 %3E %7B%0A
-    console.log(%22mouse up%22);%0A%0A
     
@@ -1430,24 +1430,44 @@
 nst %7B figure
+, listenForMouseMove
  %7D = this.st
@@ -1484,153 +1484,88 @@
 cons
-ole.log(this.state)%0A    console.log(addNewFigure.toString());%0A    if (this.props.nextFigureType !== null) %7B%0A      dispatch(addNewFigure(figure));
+t isEmpty = (%7B x1, y1 %7D) =%3E x1 === 0 %7C%7C y1 === 0;%0A%0A    if (listenForMouseMove) %7B
 %0A   
@@ -1642,32 +1642,110 @@
 null,%0A      %7D);%0A
+      if (!isEmpty(figure)) %7B%0A        dispatch(addNewFigure(figure));%0A      %7D%0A
     %7D%0A  %7D%0A%0A  onM
@@ -2425,24 +2425,72 @@
 %7D %7D = evt;%0A%0A
+    const %7B listenForMouseMove %7D = this.state;%0A%0A
     // conso
@@ -2535,27 +2535,16 @@
     if (
-this.state.
 listenFo
@@ -2557,17 +2557,8 @@
 Move
- === true
 ) %7B%0A
@@ -2949,24 +2949,27 @@
 = state;%0A   
+ //
  console.log
@@ -2989,24 +2989,27 @@
  TYPE%22);%0A   
+ //
  console.log
@@ -3036,24 +3036,27 @@
 reType);%0A   
+ //
  console.log

make mouse event handlers safer