content: import React from 'react';
  import {BaseMixin, ElementaryMixin, Tools} from './../common/common.js';
  import {Glyphicon, Button} from './../bricks/bricks.js';
  
  import './time.less';
  
  const FORMAT_AM = 'AM';
  const FORMAT_PM = 'PM';
  const FORMAT_12 = '12';
  const FORMAT_24 = '24';
  export const Time = React.createClass({
  
    mixins: [
      BaseMixin,
      ElementaryMixin
    ],
  
    statics: {
      tagName: 'UU5.Forms.Time',
      classNames: {
        main: 'uu5-forms-time'
      },
      defaults: {
        upIcon: 'uu-glyphicon-arrow-up',
        downIcon: 'uu-glyphicon-arrow-down'
      }
    },
  
    propTypes: {
      value: React.PropTypes.shape({
        hours: React.PropTypes.number,
        minutes: React.PropTypes.number,
        dayPart: React.PropTypes.oneOf([FORMAT_AM, FORMAT_PM])
      }),
      format: React.PropTypes.oneOf([FORMAT_12, FORMAT_24]),
      onChange: React.PropTypes.func
    },
  
    // Setting defaults
    getDefaultProps: function () {
      return {
        value: null,
        format: null,
        onChange: null
      };
    },
  
    getInitialState: function () {
      let state = this._parseDate();
      return state;
    },
  
    componentWillReceiveProps: function (nextProps) {
      if (nextProps.controlled) {
        if (!this.state.hours || !this.state.minutes || !this.state.dayPart || (nextProps.value && (this.state.minutes !== nextProps.value.minutes || this.state.hours !== nextProps.value.hours || this.state.dayPart !== nextProps.value.dayPart))) {
          let state = this._parseDate(nextProps);
          this.setState(state);
        }
      }
      return this;
    },
  
    // Interface
  
    // Overriding Functions
  
    // Component Specific Helpers
    _getMainAttrs: function () {
      let attrs = this.getMainAttrs();
      return attrs;
    },
  
    _parseDate(props){
      props = props || this.props;
  
      let result = {
        hours: this._isFormat12() ? 1 : 0,
        minutes: 0
      };
  
      if (props.value !== null) {
        result.hours = props.value.hours || result.hours;
        result.minutes = props.value.minutes || result.minutes;
      }
  
      if (this._isFormat12()) {
        result.pm = props.value && props.value.dayPart === FORMAT_PM;
        result.hours > 12 && (result.hours -= 12);
      }
  
      return result;
    },
  
    _getDayPart(pm) {
      return pm ? FORMAT_PM : FORMAT_AM;
    },
  
    _addDayPart(value, pm) {
      value.dayPart = this._getDayPart(pm);
      return this;
    },
  
    _isFormat12() {
      return this.props.format === FORMAT_12;
    },
  
    _timeUp(e){
      let time = this.state.minutes;
      let hours = this.state.hours;
      let is12 = this._isFormat12();
      let pm = this.state.pm;
  
      if (time < 59) {
        time++;
      } else if (time = 59) {
        if ((is12 && hours < 12) || (!is12 && hours < 23)) {
          hours++;
        } else {
          hours = is12 ? 1 : 0;
          pm = !pm;
        }
        time = 0;
      }
  
      let value = { hours: hours, minutes: time };
  
      if (typeof this.props.onChange === 'function') {
        is12 && this._addDayPart(value, pm);
  
        this.props.onChange({
          value: value,
          event: e,
          component: this
        });
      } else {
        is12 && (value.pm = pm);
        this.setState(value);
      }
  
      return this;
    },
  
    _timeDown(e){
      let time = this.state.minutes;
      let hours = this.state.hours;
      let is12 = this._isFormat12();
      let pm = this.state.pm;
  
      if (time > 0) {
        time--;
      } else if (time === 0) {
        if ((is12 && hours > 1) || (!is12 && hours > 0)) {
          hours--;
        } else {
          hours = is12 ? 12 : 23;
          pm = !pm;
        }
        time = 59;
      }
  
      let value = { hours: hours, minutes: time };
  
      if (typeof this.props.onChange === 'function') {
        is12 && this._addDayPart(value, pm);
  
        this.props.onChange({
          value: value,
          event: e,
          component: this
        });
      } else {
        is12 && (value.pm = pm);
        this.setState(value);
      }
  
      return this;
    },
  
    _hoursUp(e){
      let hours = parseInt(this.state.hours);
      let is12 = this._isFormat12();
      let pm = this.state.pm;
  
      if ((is12 && hours < 12) || (!is12 && hours < 23)) {
        hours++;
      } else {
        hours = is12 ? 1 : 0;
        pm = !pm;
      }
  
      let value = { hours: hours, minutes: this.state.minutes };
  
      if (typeof this.props.onChange === 'function') {
        is12 && this._addDayPart(value, pm);
  
        this.props.onChange({
          value: value,
          event: e,
          component: this
        });
      } else {
        is12 && (value.pm = pm);
        this.setState(value);
      }
  
      return this;
    },
  
    _hoursDown(e){
      let hours = parseInt(this.state.hours);
      let is12 = this._isFormat12();
      let pm = this.state.pm;
  
      if ((is12 && hours > 1) || (!is12 && hours > 0)) {
        hours--;
      } else {
        hours = is12 ? 12 : 23;
        pm = !pm;
      }
  
      let value = { hours: hours, minutes: this.state.minutes };
  
      if (typeof this.props.onChange === 'function') {
        is12 && this._addDayPart(value, pm);
  
        this.props.onChange({
          value: value,
          event: e,
          component: this
        });
      } else {
        is12 && (value.pm = pm);
        this.setState(value);
      }
  
      return this;
    },
  
    _changeDayPart(e){
      if (typeof this.props.onChange === 'function') {
        let value = { hours: this.state.hours, minutes: this.state.minutes };
        this._isFormat12() && this._addDayPart(value, !this.state.pm);
  
        this.props.onChange({
          value: value,
          event: e,
          component: this
        });
      } else {
        this.setState((state) => ({ pm: !state.pm }));
      }
  
      return this;
    },
  
    _getHours() {
      return Tools.rjust(this.state.hours, 2, '0');
    },
  
    _getMinutes(){
      return Tools.rjust(this.state.minutes, 2, '0');
    },
  
    // Render
    render: function () {
      return (
        <div {...this._getMainAttrs()}>
          <table className='uu5-forms-time-table'>
            <tbody>
            <tr className='uu5-forms-time-table-row'>
              <td className='uu5-forms-time-table-column'>
                <Button
                  content={<Glyphicon glyphicon={this.getDefault().upIcon} />}
                  onClick={this._hoursUp}
                  colorSchema='default'
                />
              </td>
              <td className='uu5-forms-time-table-column'>
              </td>
              <td className='uu5-forms-time-table-column'>
                <Button
                  content={<Glyphicon glyphicon={this.getDefault().upIcon} />}
                  onClick={this._timeUp}
                  colorSchema='default'
                />
              </td>
              <td className='uu5-forms-time-table-column'>
              </td>
            </tr>
  
            <tr className='uu5-forms-time-table-row'>
              <td className='uu5-forms-time-table-column'>
                {this._getHours()}
              </td>
              <td className='uu5-forms-time-table-column'>
                :
              </td>
              <td className='uu5-forms-time-table-column'>
                {this._getMinutes()}
              </td>
              <td className='uu5-forms-time-table-column'>
                {this._isFormat12() && <Button
                  content={this._getDayPart(this.state.pm)}
                  onClick={this._changeDayPart}
                  colorSchema='default'
                />
                }
              </td>
            </tr>
  
            <tr className='uu5-forms-time-table-row'>
              <td className='uu5-forms-time-table-column'>
                <Button
                  content={<Glyphicon glyphicon={this.getDefault().downIcon} />}
                  onClick={this._hoursDown}
                  colorSchema='default'
                />
              </td>
              <td className='uu5-forms-time-table-column'>
              </td>
              <td className='uu5-forms-time-table-column'>
                <Button
                  content={<Glyphicon glyphicon={this.getDefault().downIcon} />}
                  onClick={this._timeDown}
                  colorSchema='default'
                />
              </td>
              <td className='uu5-forms-time-table-column'>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      );
    }
  });
  
  export default Time;