import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as IconPickerStories from "./IconPicker.stories";

<Meta of={IconPickerStories} />

# Icon Picker

The Icon Picker component allows users to select icons from a predefined set of options. It provides an intuitive interface for icon selection in forms and design tools, with search functionality to quickly find specific icons.

## Usage

<Canvas of={IconPickerStories.Documentation} source={ { code: `
import React, { useState } from "react";
import { IconPicker } from "@webiny/admin-ui";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";

// Initialize FontAwesome library
library.add(fas as any);

const IconPickerExample = () => {
const [selectedIcon, setSelectedIcon] = useState("");
const [validation, setValidation] = useState({ isValid: true, message: "" });

    const handleChange = (newIcon: string) => {
        setSelectedIcon(newIcon);

        if (!newIcon && true) { // true represents required field
            setValidation({ isValid: false, message: "Please select an icon" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    return (
        <IconPicker
            label="Select an Icon"
            description="Choose an icon for your button"
            note="Note: The selected icon will be displayed on your button"
            required={true}
            icons={[
                { prefix: "fas", name: "trash-restore-alt" },
                { prefix: "fas", name: "file-pen" },
                { prefix: "fas", name: "receipt" },
                { prefix: "fas", name: "user-circle" },
                { prefix: "fas", name: "circle-user" }
                // Add more icons as needed
            ]}
            value={selectedIcon}
            onChange={handleChange}
            validation={validation}
        />
    );

};

export default IconPickerExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/IconPicker/IconPicker.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={IconPickerStories.Documentation} exclude={"onChange"} />

```tsx
import React, { useState } from "react";
import { IconPicker } from "@webiny/admin-ui";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";

// Initialize FontAwesome library
library.add(fas as any);

const IconPickerExample = () => {
  const [selectedIcon, setSelectedIcon] = useState("");
  const [validation, setValidation] = useState({ isValid: true, message: "" });

  const handleChange = (newIcon: string) => {
    setSelectedIcon(newIcon);

    if (!newIcon && true) {
      // true represents required field
      setValidation({ isValid: false, message: "Please select an icon" });
    } else {
      setValidation({ isValid: true, message: "" });
    }
  };

  return (
    <IconPicker
      label="Select an Icon"
      description="Choose an icon for your button"
      note="Note: The selected icon will be displayed on your button"
      required={true}
      icons={[
        { prefix: "fas", name: "trash-restore-alt" },
        { prefix: "fas", name: "file-pen" },
        { prefix: "fas", name: "receipt" },
        { prefix: "fas", name: "user-circle" },
        { prefix: "fas", name: "circle-user" }
        // Add more icons as needed
      ]}
      value={selectedIcon}
      onChange={handleChange}
      validation={validation}
    />
  );
};

export default IconPickerExample;
```

## Dynamic Loading All Font Awesome Icons

> ⚠️ **Note**: Importing all icons will increase your bundle size. Use this approach only when necessary, or pair it with a search interface to maintain a good user experience.

To automatically load all Font Awesome icons (solid, regular, and brands) for use in the `IconPicker`, you can register them with the Font Awesome library and extract them from the internal `definitions` object. This approach provides a scalable and maintainable way to manage icon sets across your application.

```tsx
import React, { useState } from "react";
import { IconPicker, IconPickerIconDto } from "@webiny/admin-ui";
import { library, IconName } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { IconPrefix } from "@fortawesome/fontawesome-common-types";

// Register all Font Awesome icons
// Initialize FontAwesome library
library.add(fab as any, fas as any, far as any);

// Define allowed prefixes
const validPrefixes: IconPrefix[] = ["fas", "far", "fab"];

// Extract icons into { prefix, name } format
const definitions = (library as any).definitions;
const allIcons: IconPickerIconDto[] = [];

Object.keys(definitions)
  .filter((pack): pack is IconPrefix => validPrefixes.includes(pack as IconPrefix))
  .forEach(prefix => {
    const icons = definitions[prefix];
    Object.keys(icons).forEach(icon => {
      allIcons.push({
        prefix,
        name: icon as IconName
      });
    });
  });
```

You can then pass the `allIcons` array to the `IconPicker` component:

```tsx
<IconPicker
  label="Select an Icon"
  description="Choose an icon for your button"
  note="Note: The selected icon will be displayed on your button"
  required={true}
  icons={allIcons}
  value={selectedIcon}
  onChange={handleChange}
  validation={validation}
/>
```