'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ReactMaterialSelect = function (_Component) {
    _inherits(ReactMaterialSelect, _Component);

    function ReactMaterialSelect(props) {
        _classCallCheck(this, ReactMaterialSelect);

        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ReactMaterialSelect).call(this, props));

        var selectedValue = null;

        // find selected value by dataValue
        if (props.defaultValue) {
            selectedValue = _this.getOptions().find(function (value) {
                return value.key === props.defaultValue;
            });
        }

        _this.state = {
            isOpen: false,
            isSelected: selectedValue,
            selected: {
                label: selectedValue ? selectedValue.label : props.label,
                value: selectedValue ? selectedValue.key : props.defaultValue
            }
        };

        _this.mounted = true;
        _this.handleDocumentClick = _this.handleDocumentClick.bind(_this);
        _this.fireChangeEvent = _this.fireChangeEvent.bind(_this);
        _this.handleToggleSelect = _this.handleToggleSelect.bind(_this);
        _this.handleOptionClick = _this.handleOptionClick.bind(_this);
        _this.handleResetClick = _this.handleResetClick.bind(_this);
        _this.getValue = _this.getValue.bind(_this);
        return _this;
    }

    _createClass(ReactMaterialSelect, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            document.addEventListener('click', this.handleDocumentClick, false);
            document.addEventListener('touchend', this.handleDocumentClick, false);
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            this.mounted = false;
            document.removeEventListener('click', this.handleDocumentClick, false);
            document.removeEventListener('touchend', this.handleDocumentClick, false);
        }

        // the simplest way to get selected value

    }, {
        key: 'getValue',
        value: function getValue() {
            return this.state.selected.value;
        }
    }, {
        key: 'getLabel',
        value: function getLabel() {
            return this.state.selected.label;
        }
    }, {
        key: 'handleToggleSelect',
        value: function handleToggleSelect() {
            this.setState({ isOpen: !this.state.isOpen });
        }
    }, {
        key: 'handleOptionClick',
        value: function handleOptionClick(e) {
            var value = e.target.attributes.data.value;
            var label = void 0;
            // if there is only one option this.props.children is object not an array
            if (this.props.children.length) {
                label = this.props.children[e.target.value].props.children;
            } else {
                label = this.props.children.props.children;
            }

            var newState = {
                isOpen: false,
                isSelected: value,
                selected: {
                    value: value,
                    label: label
                }
            };

            this.fireChangeEvent(newState);
            this.setState(newState);
        }
    }, {
        key: 'handleResetClick',
        value: function handleResetClick() {
            var newState = {
                isOpen: false,
                isSelected: null,
                selected: {
                    value: '',
                    label: ''
                }
            };

            this.fireChangeEvent(newState);
            this.setState(newState);
        }

        // close select on click outside the select

    }, {
        key: 'handleDocumentClick',
        value: function handleDocumentClick(event) {
            if (this.mounted) {
                if (!_reactDom2.default.findDOMNode(this).contains(event.target)) {
                    this.setState({
                        isOpen: false
                    });
                }
            }
        }

        // fire callback function

    }, {
        key: 'fireChangeEvent',
        value: function fireChangeEvent(newState) {
            if (newState.selected.value !== this.state.selected.value && this.props.onChange) {
                this.props.onChange(newState.selected);
            }
        }

        // get childrens

    }, {
        key: 'getOptions',
        value: function getOptions() {
            // if there is only one option this.props.children is object not an array
            if (this.props.children.length) {
                // console.log(this.props.children.length, this.props.children)
                return this.props.children.map(function (child) {
                    return {
                        key: child.props.dataValue,
                        label: child.props.children
                    };
                });
            }

            return [{
                key: this.props.children.props.dataValue,
                label: this.props.children.props.children
            }];
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props;
            var label = _props.label;
            var resetLabel = _props.resetLabel;


            var textClassName = (0, _classnames2.default)('rms-text', { 'rms-text__empty': !this.state.isSelected });
            return _react2.default.createElement(
                'div',
                { className: 'rms-wrapper' },
                _react2.default.createElement(
                    'div',
                    { className: textClassName, onClick: this.handleToggleSelect },
                    _react2.default.createElement(
                        'span',
                        null,
                        this.state.selected.label ? this.state.selected.label : label
                    )
                ),
                _react2.default.createElement(
                    'label',
                    { className: 'rms-label' },
                    label
                ),
                _react2.default.createElement(
                    'i',
                    { className: 'rms-caret' },
                    'arrow_drop_down'
                ),
                this.state.isOpen && _react2.default.createElement(
                    'ul',
                    { className: 'rms-list' },
                    _react2.default.createElement(
                        'li',
                        { className: 'rms-item rms-item__reset', onMouseDown: this.handleResetClick, onClick: this.handleResetClick },
                        resetLabel ? resetLabel : 'No value'
                    ),
                    this.getOptions().map(function (opt, key) {
                        var selectClassName = (0, _classnames2.default)('rms-item', { 'rms-item__active': opt.selected });
                        return _react2.default.createElement(
                            'li',
                            { key: 'reactMaterialSelect_' + key, className: selectClassName, value: key, data: opt.key, onMouseDown: _this2.handleOptionClick, onClick: _this2.handleOptionClick },
                            opt.label
                        );
                    })
                )
            );
        }
    }]);

    return ReactMaterialSelect;
}(_react.Component);

ReactMaterialSelect.propTypes = {
    children: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object]).isRequired,
    defaultValue: _react.PropTypes.string,
    resetLabel: _react.PropTypes.string,
    onChange: _react.PropTypes.func,
    label: _react.PropTypes.string
};

exports.default = ReactMaterialSelect;