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

import React, { Component, PropTypes } from 'react';
// import Utils     from './../../lib/utils';
import UiBase    from './../uiBase';

import InputBase from './../Input/Base';

import styles from './index.css';

const isNull = d => (d === undefined || d === null);
const isVavid = d => {
  if(isNull(d)) return false;
  if(typeof(d) === 'number') return true;
  if(!d.length) return false;
  if((d[0] === '0' && d[1] !== '.') || d[0] === '.') return false;
  if(d[d.length - 1] === '.') return false;
  return true;
};

export default class Range extends UiBase {
  static propTypes = {
    data:           PropTypes.any.isRequired,
    onChange:       PropTypes.func.isRequired,
    onFinishChange: PropTypes.func,
  }
  constructor(props: any) {
    super(props)
    props = this.props;
  }
  onMinChange = (min) => {
    if(isVavid(min)){
      const {max} = this.state.data.value;
      this.onChange({min, max});
    }
  }
  onMaxChange = (max) => {
    if(isVavid(max)){
      max = parseFloat(max, 10);
      const {min} = this.state.data.value;
      this.onChange({min, max});
    } 
  }
  _genUI(){
    const {onFinishChange, heightPhi} = this.props;
    const {step, validate, id, name, key, value, valueType, disable} = this.state.data;
    const height = this._getDefaultHeight() * heightPhi + 'px';
    const {min, max} = value;
    return(
      <div className="z_range-container" style={this._getSelectorStyle()}>
        <InputBase
          isActive={this.state.isActive}
          id={`${id}_min`}
          value={min}
          onChange={this.onMinChange}
          type={'float'}
          style={{height}}
          disabled={disable}
        />
        <div className="z_range-spliter" style={{width: height}}/>
          <InputBase
            isActive={this.state.isActive}
            id={`${id}_max`}
            value={max}
            onChange={this.onMaxChange}
            type={'float'}
            style={{height}}
            disabled={disable}
          />
      </div>
    );
  }
}