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

import React, { Component, PropTypes } from 'react';
import zscale from 'zscale';
import _      from 'lodash';
import Utils from './../../../lib/utils';
import './../../Color/index.css';

export default class ColorLine extends Component {
  static propTypes = {
    data:    PropTypes.any.isRequired,
    height:  PropTypes.number,
    width:   PropTypes.number,
    onGridMouseOver: PropTypes.func,
    onGridMouseOut:  PropTypes.func
    // onChange: PropTypes.func.isRequired,
    // onFinishChange: PropTypes.func,
  }
  constructor(props: any) {
    super(props);
    this.state = {
      isGridActive: false
    };
  }

  _getColorPicker = () => {
    const state = this.state;
    const bol = state.displayColorPicker;
    if(bol) return (
       <div className="z_color-popover">
         <div className="z_color-cover" onClick={ this.handleClose }/>
         <ChromePicker color={ state.data.value } onChange={ this.handleChange } />
       </div>
    );
    return null;
  }
  _getColorList(data){
    let height = this.props.height;
    let width  = this.props.width;
    const container = this.refs.main;
    if(container) {
      width  = width  || container.offsetWidth;
      height = height || container.offsetHeight;
    }
    height = height || 30;
    width  = width  || 100;
    let gridN = 2 * Math.max(Math.round(width / height), 3) - 2;
    
    const func = zscale.generate({
      type: 'gradient',
      value: data
    });
    const {domain} = data; 

    // 1 ■  2 ■ 3 ■ 5 ■ ... i-1 ■ i, i =  色块■的数据量 + 1;
    const delta = domain.max - domain.min;
    const step = delta / gridN;
    const domainRange = _.range(domain.min, domain.max, step);
    domainRange.push(domain.max);//少一个最后的数
    const colorRange = [];
    domainRange.forEach((vthis, i) => {
      if(i >= domainRange.length - 2) return;
      const vnext = domainRange[i + 1];
      const mean  = (vthis + vnext) / 2;
      const color = func(mean);
      const min = Utils.numberFormater(vthis, 2);
      const max = Utils.numberFormater(vnext, 2);
      const text = `${min} ~ ${max}`;
      colorRange.push({color, text});
    })
    return colorRange;
  }
  _genColorGrid(data){
    return this._getColorList(data).map((d, i) => {
      const {text, color} = d;
      return(
        <div 
          className="z_color-line-grid z_color-line-grid-gradient" 
          key={i}
          style={{background: color}}
          onMouseOver={e => this.props.onGridMouseOver(e.nativeEvent, text)}
          onMouseOut={e => this.props.onGridMouseOut()}
        >
        </div>
      )
    });
  }
  _genSelectGrid(c, key){
    const style = {
      background: c
    };
    return (
      <div
        className="z_color-line-grid z_color-line-selector"
        style={style}
        onClick={e => this.props.onSelectGridClick(e.nativeEvent, key)}
      >
      </div>
    );
  }
  render(){
    const {data, height, width} = this.props;
    const {range} = data;
    return (
      <div className="z_color-picker" ref="main">
       {this._genSelectGrid(range.min, 'min')}
       <div className="z_color-line-split" />
       {this._genColorGrid(data)}
       <div className="z_color-line-split" />
       {this._genSelectGrid(range.max, 'max')}
      </div>
    );
  }
};