function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useState, useEffect } from 'react';
import Spin from "antd/es/spin";
import Skeleton from "antd/es/skeleton"; // import "@whalecloud/fdx-theme-fdx/horizontal-select.less";

import { DownOutlined, UpOutlined } from '@fishx/icons';

var HorizontalSelect = function HorizontalSelect(_ref) {
  var data = _ref.data,
      defaultValue = _ref.defaultValue,
      value = _ref.value,
      _ref$layout = _ref.layout,
      layout = _ref$layout === void 0 ? 'inline' : _ref$layout,
      _ref$mode = _ref.mode,
      mode = _ref$mode === void 0 ? 'single' : _ref$mode,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$collapsed = _ref.collapsed,
      collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
      _ref$ctlBtnHidden = _ref.ctlBtnHidden,
      ctlBtnHidden = _ref$ctlBtnHidden === void 0 ? false : _ref$ctlBtnHidden,
      _ref$loading = _ref.loading,
      loading = _ref$loading === void 0 ? 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]; // @ts-ignore


  var handleListClick = function handleListClick(index) {
    if (disabled) return;

    if (mode === 'single') {
      // @ts-ignore
      if (!data[index].disabled) {
        setActiveItem(index); // @ts-ignore

        onChange(data[index]);
      }
    } else if (mode === 'multiple') {
      // @ts-ignore
      if (data[index].disabled) return; // @ts-ignore

      if (selectedItem.includes(data[index])) {
        var tempArr = _toConsumableArray(selectedItem); // @ts-ignore


        tempArr.splice(selectedItem.indexOf(data[index]), 1);
        setSelectedItem(tempArr);
      } else {
        // @ts-ignore
        setSelectedItem([].concat(_toConsumableArray(selectedItem), [data[index]]));
      }
    }
  }; // @ts-ignore


  var addActiveClass = function addActiveClass(index) {
    if (mode === 'multiple') {
      // @ts-ignore
      if (selectedItem.indexOf(data[index]) > -1) {
        return true;
      }
    } else {
      if (index === activeItem) {
        return true;
      }
    }

    return false;
  }; // @ts-ignore


  var setValue = function setValue(value) {
    if (mode !== 'multiple' && Array.isArray(value)) {
      // @ts-ignore
      for (var i = 0; i < data.length; i++) {
        // @ts-ignore
        if (data[i].value === value[0]) {
          setActiveItem(i);
        }
      }
    } else {
      var temp;

      if (!Array.isArray(value)) {
        temp = [value];
      } else {
        temp = value;
      }

      var ArrIndex = [];

      for (var _i2 = 0; _i2 < temp.length; _i2++) {
        // @ts-ignore
        for (var j = 0; j < data.length; j++) {
          // @ts-ignore
          if (temp[_i2] === data[j].value) {
            ArrIndex.push(j);
          }
        }
      }

      if (mode === 'single') {
        setActiveItem(ArrIndex[0]);
      } else if (mode === 'multiple') {
        var _temp = [];

        for (var _i3 = 0; _i3 < ArrIndex.length; _i3++) {
          // @ts-ignore
          _temp.push(data[ArrIndex[_i3]]);
        } // @ts-ignore


        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 (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(Spin, {
      spinning: loading
    }, /*#__PURE__*/React.createElement(Skeleton, {
      loading: loading,
      active: true,
      title: false
    }, /*#__PURE__*/React.createElement("div", {
      className: "screenDiv"
    }, /*#__PURE__*/React.createElement("div", {
      className: "screenWrap ".concat(disabled ? 'disableWrap' : '')
    }, /*#__PURE__*/React.createElement("ul", {
      className: "listWrap ".concat(!isCollapsed ? "showWrap" : '', " ").concat(layout === 'horizontal' ? "horizontalWrap" : '')
    }, // @ts-ignore
    data.map(function (item, index) {
      return /*#__PURE__*/React.createElement("li", {
        className: "listItem ".concat(item.disabled ? "disableItem" : '', " ").concat(addActiveClass(index) ? "activeItem" : '', " "),
        key: index,
        onClick: function onClick() {
          handleListClick(index);
        }
      }, item.label);
    }), layout === 'horizontal' || ctlBtnHidden ? '' : /*#__PURE__*/React.createElement("span", {
      className: "moreBtn",
      onClick: function onClick() {
        !disabled && setIsCollapsed(!isCollapsed);
      }
    }, "more", isCollapsed ? /*#__PURE__*/React.createElement("span", {
      style: {
        width: 16
      }
    }, /*#__PURE__*/React.createElement(DownOutlined, null)) : /*#__PURE__*/React.createElement("span", {
      style: {
        width: 16
      }
    }, /*#__PURE__*/React.createElement(UpOutlined, null))))))))
  );
};

export default HorizontalSelect;