"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.titleTab = exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _utils = require("../../../.storybook/utils");

var _index = require("../../index");

var _tab = require("../../static/data/tab");

// Real-life tabs should not have a clickHandler but rather listen to state updates
var handleClick = function handleClick(event) {
  event.preventDefault();
};

var TitleCounter = function TitleCounter(props) {
  return /*#__PURE__*/_react.default.createElement(_index.Counter, (0, _extends2.default)({
    color: "ruby",
    marginLeft: 3
  }, props));
};

var _default = {
  component: _index.TitleTab,
  title: (0, _utils.addStoryInGroup)(_utils.MID_LEVEL_BLOCKS, 'Tab'),
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=3336%3A291'
    },
    info: {
      propTablesExclude: [_index.Box]
    }
  }
};
exports.default = _default;

var titleTab = function titleTab(args) {
  return /*#__PURE__*/_react.default.createElement(_index.TabGroup, {
    size: args.size
  }, _tab.tabItems.map(function (item, key) {
    var optionalProps = item.count ? {
      counter: /*#__PURE__*/_react.default.createElement(TitleCounter, {
        count: item.count,
        color: item.active ? 'mint' : 'neutral',
        size: args.size
      })
    } : {};
    return /*#__PURE__*/_react.default.createElement(_index.TitleTab, (0, _extends2.default)({
      active: item.active,
      href: item.href,
      onClick: function onClick(event) {
        handleClick(event);
      }
    }, optionalProps, {
      key: key
    }), item.title);
  }));
};

exports.titleTab = titleTab;
titleTab.storyName = 'Title tab';
titleTab.args = {
  size: 'medium'
};