import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
var _jsxFileName = 'src/timePicker/TimeOptions.jsx';
/**
 * timeOptions.jsx
 *
 * @Author: apple
 * @Date: 2018/6/14 01:31
 */

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import dateConfig from './dateConfig';
import dateValid from '../util/dateValid';

var regExpRule = '^(?:[01]?\\d|2[0-3])(?::[0-5]?\\d){2}$';
/**
 * TimeOptions
 * */

var TimeOptions = function (_React$PureComponent) {
    _inherits(TimeOptions, _React$PureComponent);

    function TimeOptions(props, context) {
        _classCallCheck(this, TimeOptions);

        var _this = _possibleConstructorReturn(this, (TimeOptions.__proto__ || Object.getPrototypeOf(TimeOptions)).call(this, props, context));

        _initialiseProps.call(_this);

        var defaultValue = _this.props.defaultValue;

        _this.state = {
            datePanel: true,
            value: defaultValue,
            selectHour: ''
        };
        return _this;
    }

    _createClass(TimeOptions, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            var _props = this.props,
                onOpen = _props.onOpen,
                defaultValue = _props.defaultValue;
            var nextOnOpen = nextProps.onOpen,
                nextDefaultValue = nextProps.defaultValue;

            if (!onOpen && nextOnOpen) {
                this.transformToRightPosition(nextDefaultValue);
            } else if (onOpen && !nextOnOpen) {
                return;
            }
            if (defaultValue !== nextDefaultValue) {
                this.setBasicPosition(nextDefaultValue);
                this.setState({
                    value: nextDefaultValue
                });
            }
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            var _props2 = this.props,
                onOpen = _props2.onOpen,
                defaultValue = _props2.defaultValue;

            if (onOpen) {
                this.transformToRightPosition(defaultValue);
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props3 = this.props,
                disabledHours = _props3.disabledHours,
                disabledMinutes = _props3.disabledMinutes,
                disabledSeconds = _props3.disabledSeconds;
            var _state = this.state,
                selectHour = _state.selectHour,
                selectMinute = _state.selectMinute,
                selectSecond = _state.selectSecond;

            return React.createElement(
                'div',
                { className: 'table-time', __source: {
                        fileName: _jsxFileName,
                        lineNumber: 211
                    },
                    __self: this
                },
                [{
                    ref: function ref(hourElement) {
                        return _this2.hourElement = hourElement;
                    },
                    checked: +selectHour,
                    type: 'selectHour',
                    optionsList: dateConfig.easyToMap(24),
                    disabledFunc: function disabledFunc(time) {
                        return disabledHours(time);
                    }
                }, {
                    ref: function ref(minuteElement) {
                        return _this2.minuteElement = minuteElement;
                    },
                    checked: +selectMinute,
                    type: 'selectMinute',
                    optionsList: dateConfig.easyToMap(60),
                    disabledFunc: function disabledFunc(time) {
                        return disabledMinutes(selectHour, time);
                    }
                }, {
                    ref: function ref(secondsElement) {
                        return _this2.secondsElement = secondsElement;
                    },
                    checked: +selectSecond,
                    type: 'selectSecond',
                    optionsList: dateConfig.easyToMap(60),
                    disabledFunc: function disabledFunc(time) {
                        return disabledSeconds(selectHour, selectMinute, time);
                    }
                }].map(function (renderOption) {
                    var ref = renderOption.ref,
                        checked = renderOption.checked,
                        type = renderOption.type,
                        optionsList = renderOption.optionsList,
                        disabledFunc = renderOption.disabledFunc;

                    return React.createElement(
                        'div',
                        { className: 'time-item', ref: ref, key: type, __source: {
                                fileName: _jsxFileName,
                                lineNumber: 237
                            },
                            __self: _this2
                        },
                        optionsList.map(function (item) {
                            var classes = classNames('time-unit', { checked: item === checked });
                            var isDisabled = '';
                            if (disabledFunc && disabledFunc(item)) {
                                isDisabled = 'disabled';
                            }
                            return React.createElement(
                                'div',
                                {
                                    className: classes,
                                    key: item,
                                    disabled: isDisabled,
                                    onClick: isDisabled ? function () {} : function (element) {
                                        return _this2.selectTime(type, item, element);
                                    }, __source: {
                                        fileName: _jsxFileName,
                                        lineNumber: 245
                                    },
                                    __self: _this2
                                },
                                item
                            );
                        })
                    );
                })
            );
        }
    }]);

    return TimeOptions;
}(React.PureComponent);

TimeOptions.propTypes = {
    /**
     * 更新时间回调函数
     * @params time: 所选时间
     * @return
     * */
    onChange: PropTypes.func,
    /**
     * 禁用小时
     * @return true为禁用 false为不禁用
     * */
    disabledHours: PropTypes.func,
    /**
     * 禁用分钟
     * @params selectHour:当前所选小时
     * @return true为禁用 false为不禁用
     * */
    disabledMinutes: PropTypes.func,
    /**
     * 禁用秒
     * @params selectHour:当前所选小时, selectMinute:当前所选分钟
     * @return true为禁用 false为不禁用
     * */
    disabledSeconds: PropTypes.func
};
TimeOptions.defaultProps = {
    disabledHours: function disabledHours() {},
    disabledMinutes: function disabledMinutes() {},
    disabledSeconds: function disabledSeconds() {}
};

var _initialiseProps = function _initialiseProps() {
    var _this3 = this;

    this.getBasicPosition = function (value) {
        var _splitTime = _this3.splitTime(value),
            selectHour = _splitTime.selectHour,
            selectMinute = _splitTime.selectMinute,
            selectSecond = _splitTime.selectSecond;

        var hourElementTop = _this3.elmScrollTop(_this3.hourElement, selectHour);
        var minuteElementTop = _this3.elmScrollTop(_this3.minuteElement, selectMinute);
        var secondsElementTop = _this3.elmScrollTop(_this3.secondsElement, selectSecond);
        return { selectHour: selectHour, selectMinute: selectMinute, selectSecond: selectSecond, hourElementTop: hourElementTop, minuteElementTop: minuteElementTop, secondsElementTop: secondsElementTop };
    };

    this.setBasicPosition = function (value) {
        var _getBasicPosition = _this3.getBasicPosition(value),
            selectHour = _getBasicPosition.selectHour,
            selectMinute = _getBasicPosition.selectMinute,
            selectSecond = _getBasicPosition.selectSecond,
            hourElementTop = _getBasicPosition.hourElementTop,
            minuteElementTop = _getBasicPosition.minuteElementTop,
            secondsElementTop = _getBasicPosition.secondsElementTop;

        _this3.hourElement.scrollTop = hourElementTop;
        _this3.minuteElement.scrollTop = minuteElementTop;
        _this3.secondsElement.scrollTop = secondsElementTop;
        _this3.setState({
            selectHour: selectHour,
            selectMinute: selectMinute,
            selectSecond: selectSecond
        });
    };

    this.transformToRightPosition = function (value) {
        setTimeout(function () {
            _this3.setBasicPosition(value);
        }, 0);
    };

    this.splitTime = function (defaultValue) {
        var timeArray = void 0;
        var selectHour = void 0;
        var selectMinute = void 0;
        var selectSecond = void 0;
        if (dateValid(defaultValue, regExpRule)) {
            timeArray = defaultValue.split(':');
            selectHour = timeArray[0];
            selectMinute = timeArray[1];
            selectSecond = timeArray[2];
        } else {
            _this3.setState({
                value: ''
            });
        }
        return { selectHour: selectHour, selectMinute: selectMinute, selectSecond: selectSecond };
    };

    this.slowScrollTop = function (element, scrollTop) {
        var speed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
        var targetOption = arguments[3];
        var onChange = _this3.props.onChange;

        var original = 'up';
        var initEleScrollTop = element.scrollTop;
        if (initEleScrollTop < scrollTop) {
            original = 'down';
        }

        var timer = setInterval(function () {
            var targetEleScrollTop = element.scrollTop;
            if (original === 'down') {
                if (targetEleScrollTop >= scrollTop || targetEleScrollTop < scrollTop && targetEleScrollTop + speed > scrollTop) {
                    onChange && onChange(_this3.value, targetOption);
                    clearInterval(timer);
                } else {
                    element.scrollTop += speed;
                }
            }
            if (original === 'up') {
                if (targetEleScrollTop <= scrollTop || targetEleScrollTop > scrollTop && targetEleScrollTop - speed < scrollTop) {
                    onChange && onChange(_this3.value, targetOption);
                    clearInterval(timer);
                } else {
                    element.scrollTop -= speed;
                }
            }
        }, 10);
    };

    this.selectTime = function (type, time) {
        var onChange = _this3.props.onChange;
        var value = _this3.state.value;

        if (+time < 10) {
            time = '0' + time;
        }
        var timeArray = value.split(':');
        var activeParams = {
            selectHour: {
                element: _this3.hourElement,
                targetArrayIndex: 0
            },
            selectMinute: {
                element: _this3.minuteElement,
                targetArrayIndex: 1
            },
            selectSecond: {
                element: _this3.secondsElement,
                targetArrayIndex: 2
            }
        }[type];
        // this.slowScrollTop(element, this.elmScrollTop(element, time), 6, { type, time });
        var element = activeParams.element,
            targetArrayIndex = activeParams.targetArrayIndex;

        element.scrollTop = _this3.elmScrollTop(element, time);
        timeArray[targetArrayIndex] = time;
        _this3.value = timeArray.join(':');
        onChange && onChange(_this3.value, { type: type, time: time });
        _this3.setState(_defineProperty({}, type, time));
    };

    this.elmScrollTop = function (element, time) {
        var targetPosition = 30 * time - 120;
        var scrollTop = targetPosition > 0 ? targetPosition : 0;
        var maxScrollTop = element.scrollHeight - element.clientHeight;
        if (scrollTop >= maxScrollTop) {
            scrollTop = maxScrollTop;
        }
        return scrollTop;
    };
};

export default TimeOptions;