/*
* @Author: zhouningyi
* @Date: 2016-12-26 11:55:57
*/

import React, { Component, PropTypes } from 'react';
import SliderUI from 'material-ui/Slider';

import './index.css';
import Utils from './../../lib/utils';
import UiBase from './../uiBase';
import FloatTag     from './../subcoms/FloatTag';
import {Tooltips} from './../subcoms/FloatTag';

export function getStyles(props, context, state){
  return {
    slider:{
      display: 'flex',
      alignItems: 'center',
      width: '100%'
    }
  }
}

export default class Slider extends UiBase {
  static propTypes = {
    data:          PropTypes.any.isRequired,
    onChange:       PropTypes.func.isRequired,
    onFinishChange: PropTypes.func
  }
  constructor(props: any) {
    super(props)
  }
  _getMainOffset(){
    const container = this.refs.mainSlider || {};
    const left   = container.offsetLeft || 0;
    const top    = (container.offsetTop + container.offsetHeight / 2 - 15) || 0;
    return {top, left}
  }
  _getDotOffset(){
    const {value, validate} = this.state.data;
    const {range} = validate;
    const percent = (value - range.min) / (range.max - range.min) || 0;
    const width = (this.refs.mainSlider || {}).offsetWidth || 0;
    return percent * width || 0;
  }
  onSliderChange = (e, value) => {
    this.onChange(e, value);
  }
  _genUI(){
    let   {onChange, onFinishChange} = this.props;
    const {data} = this.state;
    let {validate, id, name, key, value, disable} = data;
    const {range, step} = validate;
    onFinishChange = onFinishChange || (() => null);

    const {isActive} = this.state;
    const style = this._getMainOffset();
    // const style = this.refs.tooltip ? this.refs.tooltip.computePosition():{};
    const offsetX = this._getDotOffset();
    Object.assign(style, {left: style.left + offsetX});

    const styles = getStyles(this.props, this.context, this.state);

    const sliderStyle = {
      marginTop: 0,
      marginBottom: 0
    };
    return (
      <div 
        className="z_slider-line-container" 
        ref="mainSlider" 
        style={this._getSelectorStyle()}
      >
      {
      // <Tooltips 
      //   ref='tooltip'
      //   label={value}
      //   show={isActive && !disable}
      //   style={style}
      //   node={this.refs.mainSlider}
      // />
      }
      {
        <FloatTag
          style={style}
          isActive={isActive && !disable}
          direction="top"
        >
          {value}
        </FloatTag>
      }
        <SliderUI
          style={styles.slider}
          min={range.min}
          max={range.max}
          defaultValue={value} 
          value={value}
          onChange={this.onSliderChange}
          step={step || 0.001}
          sliderStyle={sliderStyle}
          onDragStop= {onFinishChange}
          disabled={disable}
         />
      </div>
    );
  }
}