import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { TabGroup, TitleTab, Box, Counter as UICounter } from '../../index';
import { tabItems } from '../../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.createElement(UICounter, _extends({
    color: "ruby",
    marginLeft: 3
  }, props));
};

export default {
  component: TitleTab,
  title: addStoryInGroup(MID_LEVEL_BLOCKS, 'Tab'),
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=3336%3A291'
    },
    info: {
      propTablesExclude: [Box]
    }
  }
};
export var titleTab = function titleTab(args) {
  return /*#__PURE__*/React.createElement(TabGroup, {
    size: args.size
  }, tabItems.map(function (item, key) {
    var optionalProps = item.count ? {
      counter: /*#__PURE__*/React.createElement(TitleCounter, {
        count: item.count,
        color: item.active ? 'mint' : 'neutral',
        size: args.size
      })
    } : {};
    return /*#__PURE__*/React.createElement(TitleTab, _extends({
      active: item.active,
      href: item.href,
      onClick: function onClick(event) {
        handleClick(event);
      }
    }, optionalProps, {
      key: key
    }), item.title);
  }));
};
titleTab.storyName = 'Title tab';
titleTab.args = {
  size: 'medium'
};