/*
* @Author: zhouningyi
* @Date: 2016-12-27 15:52:11
*/

import React, { Component, PropTypes } from 'react';
import { ChromePicker } from 'react-color';

import UiBase from './../uiBase';
import './../Color/index.css';
import './index.css';
import ColorLine from './ColorLine';
import FloatTag  from './../subcoms/FloatTag';
// import Utils     from 'bcore/utils';
const defaultStyle = {
  color: 'transparent'
};

export default class Gradient extends UiBase {
  static propTypes = {
    data:    PropTypes.any.isRequired,
    onChange: PropTypes.func.isRequired,
    onFinishChange: PropTypes.func,
    colorType: PropTypes.string,
  }
  constructor(props: any) {
    super(props);
    this.state = {
      floatTagStyle: {left: 0, top: 0},
      isFloatTagActive: false,
      displayColorPicker: false,
      color: defaultStyle.color,
      floatTagText: '',
      pickerKey: 'min',
      offsetX: 0
    };
  }
  _genColorPicker = () => {
    const {pickerKey, data, displayColorPicker, offsetX} = this.state;
    const value = data.value.value || data.value;
    const pickerColor = value.range[pickerKey];
    if(displayColorPicker) return (
       <div className="z_color-popover" style={{paddingLeft: offsetX}}>
         <div className="z_color-cover" onClick={ this.onPickerClose }/>
         <ChromePicker color={ pickerColor } onChange={ this.onColorPickerChange } />
       </div>
    );
    return null;
  }
  onColorGridMouseOver = (e, text) => {
    const node = e.target;
    const left = node.offsetLeft + node.offsetWidth / 2;
    const top  = node.offsetTop;
    this.setState({
      floatTagStyle: {left, top}, 
      isFloatTagActive: true,
      floatTagText: text
    });
  }
  onColorGridMouseOut = () => {
    this.setState({
      isFloatTagActive: false
    });
  }
  onSelectGridClick = (e, k) => {
    const {target} = e;
    const colorSwatch = this.refs.colorSwatch;
    let offsetX = 0;
    if(colorSwatch) offsetX = target.offsetLeft - colorSwatch.offsetLeft;
    this.setState({
      pickerKey: k,
      displayColorPicker: true,
      offsetX
    })
  }
  _getColor(c){
    const colorType = this.props.colorType || 'rgba';
    if(colorType.indexOf('rgb') !== -1) {
      const {rgb} = c;
      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
    } else if (colorType.indexOf('hsl') !== -1){
      const hsl = c.hsl;
      const s = Math.floor(hsl.s * 100) + '%';
      const l = Math.floor(hsl.l * 100) + '%';
      return `hsla(${hsl.h}, ${s}, ${l}, ${hsl.a})`;
    } else if (colorType === 'hex') {
      return c.hex;
    }
    return c.hex;
  }
  onColorPickerChange = (c) => {
    c = this._getColor(c);
    const {pickerKey, data} = this.state;
    const value = data.value.value || data.value;
    Object.assign(value.range, {[pickerKey]: c});
    this.setState({data: data});
    const v = {
      type: 'gradient',
      value
    };
    this.onChange(v);
  }
  onPickerClose = () => {
    this.setState({
      displayColorPicker: false
    });
  }
  _genUI() {
    const value = this.state.data.value.value || this.state.data.value;
    const {heightPhi} = this.props;
    const {isFloatTagActive, floatTagStyle, floatTagText} = this.state;
    const height = this._getDefaultHeight() * heightPhi;
    return (
      <div 
        className="z_color-gradient-container" 
        style={this._getSelectorStyle()}
      >
        <FloatTag
          style={floatTagStyle}
          isActive={isFloatTagActive}
        >
          {floatTagText}
        </FloatTag>
        <div
          className="z_color-swatch z_color-transparent-image"
          style={{height}}
          ref="colorSwatch"
        > 
          <ColorLine
            data={value}
            height={height}
            onGridMouseOver={this.onColorGridMouseOver}
            onGridMouseOut={this.onColorGridMouseOut}
            onSelectGridClick={this.onSelectGridClick}
          />
        </div>
        {this._genColorPicker()}
      </div>
    );
  }
};