import React, { Component } from "react";
import { EYEDROPPER } from "../../../assets/icons";
import styles from "./colorpicker.css";
import { SketchPicker } from "react-color";

export default class ColorPicker extends Component {
  static propTypes = {
    currentElement: React.PropTypes.object
  }

  static contextTypes = {
    store: React.PropTypes.object
  }

  constructor(props) {
    super(props);

    this.state = { pickerIsOpen: false };
  }

  updateColor(hex, opacity) {
    const style = this.props.currentElement.props.style;
    const updatedColor = {};

    if (style.color !== hex) {
      updatedColor.color = hex;
    }

    if (style.opacity !== opacity) {
      updatedColor.opacity = opacity;
    }

    if (!updatedColor.opacity && !updatedColor.color) {
      return;
    }

    const updatedStyles = {
      ...style,
      ...updatedColor
    };

    this.context.store.updateElementProps({ style: updatedStyles });
  }

  handlePickerClose = (ev) => {
    const findClassRecursively = (el) => {
      const classes = el.classList ? Array.prototype.slice.call(el.classList) : [];
      const hasClass = classes.indexOf("color-picker-element") > -1;

      if (hasClass) {
        return true;
      }

      if (!el.parentNode) {
        return false;
      }

      return findClassRecursively(el.parentNode);
    };

    if (!findClassRecursively(ev.target)) {
      ev.preventDefault();
      ev.stopPropagation();
      document.removeEventListener("mousedown", this.handlePickerClose, true);

      this.setState({ pickerIsOpen: false });
    }
  }

  handlePickerOpen = () => {
    document.addEventListener("mousedown", this.handlePickerClose, true);

    this.setState({ pickerIsOpen: true });
  }

  handleChangeComplete = (color) => {
    this.updateColor(color.hex, color.hsl.a);
  }

  getRGBAValues({ opacity = 1, color }) {
    const removeHash = color.replace(/^#/, "");

    return {
      r: parseInt(removeHash.slice(0, 2), 16),
      g: parseInt(removeHash.slice(2, 4), 16),
      b: parseInt(removeHash.slice(4), 16),
      a: opacity
    };
  }

  render() {
    const { currentElement } = this.props;
    const rgba = this.getRGBAValues(currentElement.props.style);
    console.log(rgba);
    return (
      <div className={styles.colorWrapper}>
        <div
          onClick={this.handlePickerOpen}
          className={styles.colorPickerTemplateBox}
          style={{ background: currentElement.props.style.color }}
        >
        </div>
        <div
          onClick={this.handlePickerOpen}
          className={styles.dropper}
          dangerouslySetInnerHTML={{ __html: EYEDROPPER }}
        >
        </div>
        <div
          className={
            `${styles.pickerWrapper}
             ${this.state.pickerIsOpen ? "" : styles.hidden}
             color-picker-element`
            }
        >
          <SketchPicker
            color={rgba}
            onChangeComplete={this.handleChangeComplete}
          />
        </div>
      </div>
    );
  }
}

@@ -456,493 +456,274 @@
 %0A%0A  
-updateColor(hex, opacity) %7B%0A    const style = this.props.currentElement.props.style;%0A    const updatedColor = %7B%7D;%0A%0A    if (style.color !== hex) %7B%0A      updatedColor.color = hex;%0A    %7D%0A%0A    if (style.opacity !== opacity) %7B%0A      updatedColor.opacity = opacity;%0A    %7D%0A%0A    if (!updatedColor.opacity && !updatedColor.color) %7B%0A      return;%0A    %7D%0A%0A    const updatedStyles = %7B%0A      ...style,%0A      ...updatedColor%0A    %7D;%0A%0A    this.context.store.updateElementProps(%7B style: updatedStyles
+getRGBAValues(%7B opacity = 1, color %7D) %7B%0A    const removedHash = color.replace(/%5E#/, %22%22);%0A%0A    return %7B%0A      r: parseInt(removedHash.slice(0, 2), 16),%0A      g: parseInt(removedHash.slice(2, 4), 16),%0A      b: parseInt(removedHash.slice(4), 16),%0A      a: opacity%0A   
  %7D
-)
 ;%0A  
@@ -1606,270 +1606,493 @@
 %0A%0A  
-getRGBAValues(%7B opacity = 1, color %7D) %7B%0A    const removeHash = color.replace(/%5E#/, %22%22);%0A%0A    return %7B%0A      r: parseInt(removeHash.slice(0, 2), 16),%0A      g: parseInt(removeHash.slice(2, 4), 16),%0A      b: parseInt(removeHash.slice(4), 16),%0A      a: opacity%0A   
+updateColor(hex, opacity) %7B%0A    const style = this.props.currentElement.props.style;%0A    const updatedColor = %7B%7D;%0A%0A    if (style.color !== hex) %7B%0A      updatedColor.color = hex;%0A    %7D%0A%0A    if (style.opacity !== opacity) %7B%0A      updatedColor.opacity = opacity;%0A    %7D%0A%0A    if (!updatedColor.opacity && !updatedColor.color) %7B%0A      return;%0A    %7D%0A%0A    const updatedStyles = %7B%0A      ...style,%0A      ...updatedColor%0A    %7D;%0A%0A    this.context.store.updateElementProps(%7B style: updatedStyles
  %7D
+)
 ;%0A  
@@ -2219,30 +2219,8 @@
 e);%0A
-    console.log(rgba);
 %0A   

change variable name, fix linting error