import * as React from "react";
import {
  header,
  tabs,
  tab,
  description,
  importExample,
  title,
  divider
} from "@wix/wix-storybook-utils/Sections";
import CategoryList from "../../components/category-list";
import { classes } from "./style.st.css";
import {
  Settings,
  Presets,
  CustomizeDesign,
  Layout,
  Crop,
  Link
} from "../../../classic-editor/system/dist";
import HeaderIcons from "../../components/header-icons";
import IconsExample from "../../components/icons-example";
import { classicEditorSystemIconsMetadata } from "../../../classic-editor/system/metadata";
import * as iconComponents from "../../../classic-editor/system/dist";
import API_Table from "../../APITable";
import { getIconSizeKeys } from "../../utils";
import { CLASSIC_EDITOR_CATEGORY, SYSTEM_ICONS } from "../../constants";
const mapIconToRow = ({ title: _title, sizes }) => {
  const iconSize = Object.keys(sizes).length ? Object.keys(sizes)[0] : "";
  const Icon = iconComponents[_title];
  return [Icon && /* @__PURE__ */ React.createElement(Icon, null), _title, iconSize && `${iconSize}x${iconSize}`];
};
const tableHeaderTitles = ["Icon", "Icon Name", "Icon Size"];
const iconSizeKeys = getIconSizeKeys(classicEditorSystemIconsMetadata);
const searchKeys = ["title", ...iconSizeKeys, "tags", "aliases"];
var index_story_default = {
  category: CLASSIC_EDITOR_CATEGORY,
  storyName: SYSTEM_ICONS,
  component: () => /* @__PURE__ */ React.createElement(IconsExample, { dataHook: "icon-list", ...{ iconComponents } }),
  sections: [
    header({
      component: /* @__PURE__ */ React.createElement(HeaderIcons, null, /* @__PURE__ */ React.createElement(Settings, null), /* @__PURE__ */ React.createElement(Presets, null), /* @__PURE__ */ React.createElement(CustomizeDesign, null), /* @__PURE__ */ React.createElement(Layout, null), /* @__PURE__ */ React.createElement(Crop, null), /* @__PURE__ */ React.createElement(Link, null)),
      sourceUrl: "https://github.com/wix/wix-ui/tree/master/packages/wix-ui-icons-common/src/system"
    }),
    tabs([
      tab({
        title: "Icon List",
        sections: [
          description({
            title: "Adding New Icons",
            text: `Base UI Icons are owned by Hive Team.<br/>If you can\u2019t find an icon for your needs or some adjustments need to be made to existing ones, please submit <a href="https://docs.google.com/forms/d/e/1FAIpQLScLrVAwWsVVqlL1dvtVIMRX_mmTZAWIKHv1Mf0LYKkj8i1xUw/viewform">Icon Request.</a>`
          }),
          importExample(
            "import { ConnectedToData } from '@wix/wix-ui-icons-common/classic-editor/system';"
          ),
          divider(),
          title("Categories"),
          description({
            text: "The usage of each icon type is determined by intention and size. Icons should be used strictly according to the description."
          }),
          /* @__PURE__ */ React.createElement(
            CategoryList,
            {
              dataHook: "icon-list",
              className: classes.tableList,
              iconsMetadata: classicEditorSystemIconsMetadata,
              ...{
                tableHeaderTitles,
                searchKeys,
                mapIconToRow
              }
            }
          )
        ]
      }),
      tab({
        title: "API",
        sections: [description({ title: "Props", text: API_Table })]
      })
    ])
  ]
};
export {
  index_story_default as default
};
