import React from "react";
import { connect, Provider } from "react-redux";
import ReactDOM from "react-dom";

import {GridClicked} from "../actions/canvas";

import {getPixelImgData, clearPixel, createPixel} from "../utils/grid-utils";

import CSSModules from 'react-css-modules';
import styles from "../../scss/grid.scss";

class Canvas extends React.Component {
  constructor(props){
    super(props)
    this.createGrid = this.createGrid.bind(this);
    this.handleClick = this.handleClick.bind(this);
    // this.updateGridColor = this.updateGridColor.bind(this);
  }

  componentDidMount(){
    let ctx = ReactDOM.findDOMNode(this).getContext("2d");
    this.createGrid();
  }

  createGrid(){
    let ctx = ReactDOM.findDOMNode(this).getContext("2d");
    const{columnCount, rowCount, pixelCount, backgroundHex } = this.props;
      for(var r = 0; r < columnCount; r++) {
          for(var i = 0; i < rowCount; i++) {
              ctx.strokeStyle = "#262626";
              ctx.strokeRect(r * pixelCount, i * pixelCount, pixelCount, pixelCount);
              ctx.fillStyle = backgroundHex;
              ctx.fillRect(r * pixelCount + 1, i * pixelCount + 1, pixelCount - 2, pixelCount - 2);
          }
      }
  }

  handleClick(e){
      // this.updateGridColor();
      const{dispatch, columnCount, rowCount, pixelCount, pixelHex, pixelRed, pixelGreen, pixelBlue, backgroundRed, backgroundGreen, backgroundBlue } = this.props;
      let ctx = ReactDOM.findDOMNode(this).getContext("2d");
      let imgData = getPixelImgData(e, ctx, pixelCount);

      e = e || window.event;
      ctx.fillStyle = pixelHex;

      if(imgData.data[0] !== parseFloat(backgroundRed)
         && imgData.data[1] !== parseFloat(backgroundGreen)
         && imgData.data[2] !== parseFloat(backgroundBlue)
        ){
          ctx.fillStyle = `rgba(${backgroundRed}, ${backgroundGreen}, ${backgroundBlue}, 1)`;
          clearPixel(e, ctx, pixelCount);
          createPixel(e, ctx, pixelCount);
          return false;
      }

      createPixel(e, ctx, pixelCount);

      dispatch(GridClicked());

  }

  getCoordinates(e){

  }

  updateGridColor(){

    const{columnCount, rowCount, pixelCount, backgroundRed, backgroundGreen, backgroundBlue, backgroundHex} = this.props;
      for(let x = 0; x < columnCount; x++) {
          for(let y = 0; y < rowCount; y++) {
              ctx.strokeStyle = `${backgroundRed + 44}. ${backgroundGreen + 44}. ${backgroundBlue + 44}`;
              ctx.strokeRect(x * pixelCount, y * pixelCount, pixelCount, pixelCount);
              ctx.fillStyle = 'rgba(backgroundRed, backgroundGreen, backgroundBlue, 1)';
              ctx.fillRect(x * pixelCount + 1, y * pixelCount + 1, pixelCount - 2, pixelCount - 2);
          }
      }

      // for(let x = 0; x < elem.s.storeValues.length; x++){
      //     ctx.fillStyle = elem.s.storeValues[x][2];
      //     ctx.fillRect(parseFloat(elem.s.storeValues[x][0]) + 1, parseFloat(elem.s.storeValues[x][1]) + 1, elem.s.pixSize - 2, elem.s.pixSize - 2);
      // }
  }



  render() {
    const {rowCount, columnCount} = this.props;
      return(
        <canvas styleName='canvasGrid' id='canvasGrid' onClick={this.handleClick} width={rowCount * rowCount} height={columnCount * columnCount} ref="canvasGrid" />
      )
  }
}

export default CSSModules(Canvas, styles);

@@ -1235,16 +1235,193 @@
 ick(e)%7B%0A
+      e = e %7C%7C window.event;%0A      var xVal = Math.floor(e.offsetX / elem.s.pixSize) * elem.s.pixSize;%0A      var yVal = Math.floor(e.offsetY / elem.s.pixSize) * elem.s.pixSize;%0A
       //
@@ -1731,37 +1731,8 @@
 );%0A%0A
-      e = e %7C%7C window.event;%0A
     
@@ -2224,16 +2224,26 @@
 Clicked(
+xVal, yVal
 ));%0A%0A  %7D

Update canvas action handler