import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["itemArray", "selectedColor", "onClick", "__designMode"];
import * as React from 'react';
import { useState } from 'react';
import { Image } from '@alilc/lowcode-materials';
import "./index.scss";
var Navigation = function BottomNavigation(_ref) {
  var itemArray = _ref.itemArray,
    selectedColor = _ref.selectedColor,
    onClick = _ref.onClick,
    __designMode = _ref.__designMode,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(0),
    activeNum = _useState[0],
    setActiveNum = _useState[1];
  var clickHandle = function clickHandle(index, pageId) {
    // 更新激活tab
    setActiveNum(index);
    if (__designMode == 'design') {
      // 设计态不执行跳转
      return;
    }
    console.log('clickHandle', pageId);
    onClick(pageId);
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "bottom-navigation"
  }, otherProps), /*#__PURE__*/React.createElement("div", {
    className: "navigation-panel"
  }, itemArray.map(function (item, index) {
    var _item$selectedIcon;
    return /*#__PURE__*/React.createElement("div", {
      className: "navigation-panel-item",
      onClick: function onClick() {
        return clickHandle(index, item.pageId);
      },
      style: {
        color: activeNum === index ? selectedColor !== null && selectedColor !== void 0 ? selectedColor : '#4598FF' : '',
        fontWeight: activeNum === index ? "bold" : "500"
      }
    }, /*#__PURE__*/React.createElement(Image, {
      className: "navigation-item-image",
      src: activeNum === index ? (_item$selectedIcon = item.selectedIcon) !== null && _item$selectedIcon !== void 0 ? _item$selectedIcon : item.icon : item.icon,
      style: {
        width: '24.5px',
        height: '24.5px'
      }
    }), /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: "12px"
      }
    }, item.text));
  })));
};
export default Navigation;