'use strict';

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

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

var _spin = require('../spin');

var _spin2 = _interopRequireDefault(_spin);

var _skeleton = require('../skeleton');

var _skeleton2 = _interopRequireDefault(_skeleton);

var _LocaleReceiver = require('antd/es/locale-provider/LocaleReceiver');

var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);

var _default = require('../locale/default');

var _default2 = _interopRequireDefault(_default);

require('@whalecloud/fdx-theme-fdx/horizontal-select.less');

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

var HorizontalSelect = function HorizontalSelect(_ref) {
    var data = _ref.data,
        defaultValue = _ref.defaultValue,
        value = _ref.value,
        _ref$layout = _ref.layout,
        layout = _ref$layout === undefined ? 'inline' : _ref$layout,
        _ref$mode = _ref.mode,
        mode = _ref$mode === undefined ? 'single' : _ref$mode,
        _ref$disabled = _ref.disabled,
        disabled = _ref$disabled === undefined ? false : _ref$disabled,
        _ref$collapsed = _ref.collapsed,
        collapsed = _ref$collapsed === undefined ? false : _ref$collapsed,
        _ref$ctlBtnHidden = _ref.ctlBtnHidden,
        ctlBtnHidden = _ref$ctlBtnHidden === undefined ? false : _ref$ctlBtnHidden,
        _ref$loading = _ref.loading,
        loading = _ref$loading === undefined ? false : _ref$loading,
        onChange = _ref.onChange;

    var _useState = (0, _react.useState)(false),
        _useState2 = (0, _slicedToArray3['default'])(_useState, 2),
        isCollapsed = _useState2[0],
        setIsCollapsed = _useState2[1];

    var _useState3 = (0, _react.useState)(-1),
        _useState4 = (0, _slicedToArray3['default'])(_useState3, 2),
        activeItem = _useState4[0],
        setActiveItem = _useState4[1];

    var _useState5 = (0, _react.useState)([]),
        _useState6 = (0, _slicedToArray3['default'])(_useState5, 2),
        selectedItem = _useState6[0],
        setSelectedItem = _useState6[1];

    var handleListClick = function handleListClick(index) {
        if (disabled) return;
        if (mode === 'single') {
            if (!data[index].disabled) {
                setActiveItem(index);
                onChange(data[index]);
            }
        } else if (mode === 'multiple') {
            if (data[index].disabled) return;
            if (selectedItem.includes(data[index])) {
                var tempArr = [].concat((0, _toConsumableArray3['default'])(selectedItem));
                tempArr.splice(selectedItem.indexOf(data[index]), 1);
                setSelectedItem(tempArr);
            } else {
                setSelectedItem([].concat((0, _toConsumableArray3['default'])(selectedItem), [data[index]]));
            }
        }
    };
    var addActiveClass = function addActiveClass(index) {
        if (mode === 'multiple') {
            if (selectedItem.indexOf(data[index]) > -1) {
                return true;
            }
        } else {
            if (index === activeItem) {
                return true;
            }
        }
        return false;
    };
    var setValue = function setValue(value) {
        if (mode !== 'multiple' && Array.isArray(value)) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].value === value[0]) {
                    setActiveItem(i);
                }
            }
        } else {
            var temp = void 0;
            if (!Array.isArray(value)) {
                temp = [value];
            } else {
                temp = value;
            }
            var ArrIndex = [];
            for (var _i = 0; _i < temp.length; _i++) {
                for (var j = 0; j < data.length; j++) {
                    if (temp[_i] === data[j].value) {
                        ArrIndex.push(j);
                    }
                }
            }
            if (mode === 'single') {
                setActiveItem(ArrIndex[0]);
            } else if (mode === 'multiple') {
                var _temp = [];
                for (var _i2 = 0; _i2 < ArrIndex.length; _i2++) {
                    _temp.push(data[ArrIndex[_i2]]);
                }
                setSelectedItem(_temp);
            }
        }
    };
    (0, _react.useEffect)(function () {
        collapsed ? setIsCollapsed(true) : '';
        if (value) {
            setValue(value);
        } else if (defaultValue) {
            setValue(defaultValue);
        }
    }, [value]);
    (0, _react.useEffect)(function () {
        /* Use this useEffect to perform actions when name get updated. */
        onChange ? onChange(selectedItem) : '';
    }, [selectedItem]);
    return _react2['default'].createElement(
        _LocaleReceiver2['default'],
        { componentName: 'HorizontalSelect', defaultLocale: _default2['default'].HorizontalSelect },
        function (locale) {
            return _react2['default'].createElement(
                _spin2['default'],
                { spinning: loading },
                _react2['default'].createElement(
                    _skeleton2['default'],
                    { loading: loading, active: true, title: false },
                    _react2['default'].createElement(
                        'div',
                        { className: 'screenDiv' },
                        _react2['default'].createElement(
                            'div',
                            { className: 'screenWrap ' + (disabled ? 'disableWrap' : '') },
                            _react2['default'].createElement(
                                'ul',
                                { className: 'listWrap ' + (!isCollapsed ? "showWrap" : '') + ' ' + (layout === 'horizontal' ? "horizontalWrap" : '') },
                                data.map(function (item, index) {
                                    return _react2['default'].createElement(
                                        'li',
                                        { className: 'listItem ' + (item.disabled ? "disableItem" : '') + ' ' + (addActiveClass(index) ? "activeItem" : '') + ' ', key: index, onClick: function onClick() {
                                                handleListClick(index);
                                            } },
                                        item.label
                                    );
                                }),
                                layout === 'horizontal' || ctlBtnHidden ? '' : _react2['default'].createElement(
                                    'span',
                                    { className: 'moreBtn', onClick: function onClick() {
                                            !disabled && setIsCollapsed(!isCollapsed);
                                        } },
                                    locale.more,
                                    _react2['default'].createElement(
                                        'span',
                                        { style: { width: 16 } },
                                        _react2['default'].createElement(_icon2['default'], { type: isCollapsed ? "down" : "up" })
                                    )
                                )
                            )
                        )
                    )
                )
            );
        }
    );
};
exports['default'] = HorizontalSelect;
module.exports = exports['default'];