import React from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import * as Icons from '@teamleader/ui-icons';
import { Box, Icon, TextSmall } from '../../index';
import { IconWarningBadgedMediumOutline } from '@teamleader/ui-icons';
import description from './description.md';
var gridStyles = {
  display: 'flex',
  flexWrap: 'wrap'
};
var itemStyles = {
  alignItems: 'center',
  display: 'flex',
  width: '320px',
  whiteSpace: 'nowrap'
};
export default {
  component: Icon,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Icon'),
  parameters: {
    docs: {
      description: {
        component: description
      }
    }
  }
};
export var DefaultStory = function DefaultStory(args) {
  return /*#__PURE__*/React.createElement(Icon, args, /*#__PURE__*/React.createElement(IconWarningBadgedMediumOutline, null));
};
export var Overview14x14 = function Overview14x14() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Icons).map(function (key, index) {
    if (key.includes('Small')) {
      var IconToRender = Icons[key];
      return /*#__PURE__*/React.createElement(Box, {
        element: "span",
        key: index,
        style: itemStyles,
        padding: 3
      }, /*#__PURE__*/React.createElement(Icon, null, /*#__PURE__*/React.createElement(IconToRender, null)), /*#__PURE__*/React.createElement(TextSmall, {
        marginLeft: 3,
        style: {
          display: 'inline-block'
        }
      }, key));
    }

    return null;
  }));
};
export var Overview24x24 = function Overview24x24() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Icons).map(function (key, index) {
    if (key.includes('Medium')) {
      var IconToRender = Icons[key];
      return /*#__PURE__*/React.createElement(Box, {
        element: "span",
        key: index,
        style: itemStyles,
        padding: 3
      }, /*#__PURE__*/React.createElement(Icon, null, /*#__PURE__*/React.createElement(IconToRender, null)), /*#__PURE__*/React.createElement(TextSmall, {
        marginLeft: 3,
        style: {
          display: 'inline-block'
        }
      }, key));
    }

    return null;
  }));
};