import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import React, { useState, useEffect } from 'react';
import Icon from '../icon';
import Spin from '../spin';
import Skeleton from '../skeleton';
import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
import defaultLocale from '../locale/default';
import "@whalecloud/fdx-theme-fdx/horizontal-select.less";
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 = useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        isCollapsed = _useState2[0],
        setIsCollapsed = _useState2[1];

    var _useState3 = useState(-1),
        _useState4 = _slicedToArray(_useState3, 2),
        activeItem = _useState4[0],
        setActiveItem = _useState4[1];

    var _useState5 = useState([]),
        _useState6 = _slicedToArray(_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(_toConsumableArray(selectedItem));
                tempArr.splice(selectedItem.indexOf(data[index]), 1);
                setSelectedItem(tempArr);
            } else {
                setSelectedItem([].concat(_toConsumableArray(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);
            }
        }
    };
    useEffect(function () {
        collapsed ? setIsCollapsed(true) : '';
        if (value) {
            setValue(value);
        } else if (defaultValue) {
            setValue(defaultValue);
        }
    }, [value]);
    useEffect(function () {
        /* Use this useEffect to perform actions when name get updated. */
        onChange ? onChange(selectedItem) : '';
    }, [selectedItem]);
    return React.createElement(
        LocaleReceiver,
        { componentName: 'HorizontalSelect', defaultLocale: defaultLocale.HorizontalSelect },
        function (locale) {
            return React.createElement(
                Spin,
                { spinning: loading },
                React.createElement(
                    Skeleton,
                    { loading: loading, active: true, title: false },
                    React.createElement(
                        'div',
                        { className: 'screenDiv' },
                        React.createElement(
                            'div',
                            { className: 'screenWrap ' + (disabled ? 'disableWrap' : '') },
                            React.createElement(
                                'ul',
                                { className: 'listWrap ' + (!isCollapsed ? "showWrap" : '') + ' ' + (layout === 'horizontal' ? "horizontalWrap" : '') },
                                data.map(function (item, index) {
                                    return React.createElement(
                                        'li',
                                        { className: 'listItem ' + (item.disabled ? "disableItem" : '') + ' ' + (addActiveClass(index) ? "activeItem" : '') + ' ', key: index, onClick: function onClick() {
                                                handleListClick(index);
                                            } },
                                        item.label
                                    );
                                }),
                                layout === 'horizontal' || ctlBtnHidden ? '' : React.createElement(
                                    'span',
                                    { className: 'moreBtn', onClick: function onClick() {
                                            !disabled && setIsCollapsed(!isCollapsed);
                                        } },
                                    locale.more,
                                    React.createElement(
                                        'span',
                                        { style: { width: 16 } },
                                        React.createElement(Icon, { type: isCollapsed ? "down" : "up" })
                                    )
                                )
                            )
                        )
                    )
                )
            );
        }
    );
};
export default HorizontalSelect;