import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.map.js';
import React__default, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { styled } from 'styled-components';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react';
import { spacing09 } from '@carbon/layout';
import { settings } from '../../constants/Settings.js';
import Button from '../Button/Button.js';
import { COLORS, PADDING, SIZES } from '../../styles/styles.js';

var _excluded = ["tabs", "hero", "actions", "onSelectionChange", "workArea", "testId"],
  _excluded2 = ["children", "id", "label"],
  _excluded3 = ["id"];
var prefix = settings.prefix;
var StyledNavigationContainer = styled.div.withConfig({
  displayName: "NavigationBar__StyledNavigationContainer",
  componentId: "sc-bw68kq-0"
})(["position:relative;background-color:", ";padding-top:", ";div[role='tablist']{padding-left:", ";padding-right:", ";align-items:center;height:100%;block-size:auto;button.cds--tabs__nav-item{width:10rem;height:100%;align-items:flex-end;@media (min-width:42em){a.", "--tabs__nav-link{height:100%;}}}margin-left:0rem;}@media (min-width:42em){padding-top:0;nav::after{background:", ";content:'';height:1px;left:0;position:absolute;bottom:-1px;width:100%;}}"], COLORS.white, spacing09, PADDING.horizontalWrapPadding, PADDING.horizontalWrapPadding, prefix, COLORS.lightGrey);
var StyledOverlay = styled.div.withConfig({
  displayName: "NavigationBar__StyledOverlay",
  componentId: "sc-bw68kq-1"
})(["position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:white;opacity:0.5;z-index:1000;"]);
var StyledTabToContent = styled.div.withConfig({
  displayName: "NavigationBar__StyledTabToContent",
  componentId: "sc-bw68kq-2"
})(["display:flex;flex-flow:column nowrap;width:100%;.", "--tabs-trigger{background-color:", ";}"], prefix, COLORS.white);
var StyledTabContent = styled.div.withConfig({
  displayName: "NavigationBar__StyledTabContent",
  componentId: "sc-bw68kq-3"
})(["display:flex;flex-flow:column nowrap;"]);
var StyledTabChildren = styled.div.withConfig({
  displayName: "NavigationBar__StyledTabChildren",
  componentId: "sc-bw68kq-4"
})(["background:", ";padding-left:", ";padding-right:", ";"], COLORS.superLightGray, PADDING.horizontalWrapPadding, PADDING.horizontalWrapPadding);
var StyledActions = styled.div.withConfig({
  displayName: "NavigationBar__StyledActions",
  componentId: "sc-bw68kq-5"
})(["display:flex;flex-flow:row nowrap;display:flex;align-items:center;position:absolute;padding-left:", ";padding-right:0;height:", ";top:0px;right:0px;z-index:2;"], PADDING.horizontalWrapPadding, SIZES.navigationBarHeight);
var propTypes = {
  /** Array of props to pass through to the tabs */
  tabs: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    label: PropTypes.node,
    children: PropTypes.node
  })).isRequired,
  /** Array of props to pass through to the action buttons */
  actions: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    kind: PropTypes.string,
    children: PropTypes.node,
    onClick: PropTypes.func
  })),
  /** If a tab isn't selected, should that tabs contents be removed from the DOM? */
  hidden: PropTypes.bool,
  /** listen to tab change if you want to trigger something on change, not fired on the initial render.  Sends the selected tab id */
  onSelectionChange: PropTypes.func,
  /** TEMP: component to render Hero within Nav Bar across all tab content, we think the tabs will move down over the table and different content will show for each */
  hero: PropTypes.node,
  /** workarea renders directly above tabs if passed */
  workArea: PropTypes.node,
  testId: PropTypes.string
};
var defaultProps = {
  actions: [],
  /** by default I think we should hide any TabContent that's not selected */
  hidden: false,
  hero: null,
  onSelectionChange: null,
  workArea: null,
  testId: 'navigation-bar'
};

/**
 * This component is just wrapping up the Carbon Tabs, adding some optional action buttons at the right side.  And for now automatically rendering a page hero component across all tabs
 */
var NavigationBar = function NavigationBar(_ref) {
  var tabs = _ref.tabs,
    hero = _ref.hero,
    actions = _ref.actions,
    _onSelectionChange = _ref.onSelectionChange,
    workArea = _ref.workArea,
    testId = _ref.testId,
    others = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React__default.createElement(Fragment, null, workArea || null, /*#__PURE__*/React__default.createElement(StyledNavigationContainer, {
    "data-testid": testId,
    hasActions: actions.length > 0
  }, workArea ? /*#__PURE__*/React__default.createElement(StyledOverlay, null) : null, hero, /*#__PURE__*/React__default.createElement(StyledTabToContent, null, /*#__PURE__*/React__default.createElement(Tabs, _extends({
    "data-testid": "".concat(testId, "-tabs")
  }, others, {
    onSelectionChange: function onSelectionChange(index) {
      return _onSelectionChange && _onSelectionChange(tabs[index].id);
    }
  }), /*#__PURE__*/React__default.createElement(TabList, {
    "aria-label": testId
  }, tabs.map(function (_ref2) {
    _ref2.children;
      var id = _ref2.id,
      label = _ref2.label,
      other = _objectWithoutProperties(_ref2, _excluded2);
    return /*#__PURE__*/React__default.createElement(Tab, _extends({
      key: id
    }, other), label);
  })), /*#__PURE__*/React__default.createElement(TabPanels, null, tabs.map(function (_ref3) {
    var children = _ref3.children,
      id = _ref3.id;
    return /*#__PURE__*/React__default.createElement(TabPanel, {
      key: id
    }, /*#__PURE__*/React__default.createElement(StyledTabContent, null, /*#__PURE__*/React__default.createElement(StyledTabChildren, null, children)));
  })))), actions && actions.length > 0 ? /*#__PURE__*/React__default.createElement(StyledActions, {
    "data-testid": "".concat(testId, "-actions")
  }, actions.map(function (_ref4) {
    var id = _ref4.id,
      other = _objectWithoutProperties(_ref4, _excluded3);
    return /*#__PURE__*/React__default.createElement(Button, _extends({
      key: id
    }, other, {
      testId: "".concat(testId, "-button-").concat(id)
    }));
  })) : null));
};
NavigationBar.propTypes = propTypes;
NavigationBar.defaultProps = defaultProps;
NavigationBar.__docgenInfo = {
  "description": "This component is just wrapping up the Carbon Tabs, adding some optional action buttons at the right side.  And for now automatically rendering a page hero component across all tabs",
  "methods": [],
  "displayName": "NavigationBar",
  "props": {
    "actions": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "Array of props to pass through to the action buttons",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": true
            },
            "kind": {
              "name": "string",
              "required": false
            },
            "children": {
              "name": "node",
              "required": false
            },
            "onClick": {
              "name": "func",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "hidden": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "If a tab isn't selected, should that tabs contents be removed from the DOM?",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "hero": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "TEMP: component to render Hero within Nav Bar across all tab content, we think the tabs will move down over the table and different content will show for each",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "onSelectionChange": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "listen to tab change if you want to trigger something on change, not fired on the initial render.  Sends the selected tab id",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "workArea": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "workarea renders directly above tabs if passed",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'navigation-bar'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "tabs": {
      "description": "Array of props to pass through to the tabs",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": true
            },
            "label": {
              "name": "node",
              "required": false
            },
            "children": {
              "name": "node",
              "required": false
            }
          }
        }
      },
      "required": true
    }
  }
};
var NavigationBar$1 = NavigationBar;

export { NavigationBar$1 as default };
