import IconButton from '../IconButton'
import Flex from '../../Flex/Flex'
import Button from '../../Button/Button'
import DialogContentContainer from '../../DialogContentContainer/DialogContentContainer'
import person1 from './assets/person1.png'
import {
  Bolt,
  Robot,
  Doc,
  Pin,
  Show,
  HighlightColorBucket,
  Broom,
  Add,
  Time,
  Item,
  CloseSmall,
  Drag,
  Filter,
  Close,
} from '../../Icon/Icons'
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs'
import {
  BUTTON_GROUP,
  MENU_BUTTON,
  BUTTON,
} from '../../../storybook/components/related-components/component-description-map'
import { Link, createComponentTemplate, createStoryMetaSettings } from '../../../storybook'
import LinkComponent from '../../Link/Link'
import Icon from '../../Icon/Icon'
import Heading from '../../Heading/Heading'
import classes from './iconButton.stories.module.scss'
import Avatar from '../../Avatar/Avatar'

export const metaSettings = createStoryMetaSettings({
  component: IconButton,
  enumPropNamesArray: ['kind', 'size', 'color'],
  iconPropNamesArray: ['icon'],
  actionPropsArray: ['onClick'],
})

<Meta
  title='Buttons/Icon Button'
  component={IconButton}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const iconButtonTemplate = createComponentTemplate(IconButton)

<!--- Component documentation -->

# IconButton

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Icon button is a square button contains only icon with no visible text labels used mostly in control bars.

<Canvas>
  <Story name='Overview' args={{ ariaLabel: 'Close' }}>
    {iconButtonTemplate.bind()}
  </Story>
</Canvas>

## Props

<ArgsTable story={'Overview'} />

## Usage

<UsageGuidelines
  guidelines={[
    <>
      Icon button will always appear with a{' '}
      <Link href='/?path=/docs/popover-tooltip--overview'>tooltip</Link> while hovering, defining
      the icon’s meaning.
    </>,
    "Use an icon button when a user can perform an inline action on this page and there's no room for a default button.",
    'Use icon button when you want to display an active state of a button.',
    "Use a Primary icon button when it's the most important action to take.",
    'Use icon button only when the icons is clear and understandable.',
    'Icon buttons are often used when there are 2 or 3 adjacent icons buttons that perform actions on a single item presented in a row.',
  ]}
/>

<Tip title='Check yourself'>
  To display icons that do not have actions associated with them, use the{' '}
  <Link href='/?path=/docs/components-icon--overview' size={Link.sizes.SMALL} withoutSpacing>
    Icon component
  </Link>
  .
</Tip>

## Variants

### Kinds

There can be more than one button in a screen, but to create the hierarchy of actions we need to use button kinds.

<Canvas>
  <Story name='Kinds'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton icon={Close} kind={IconButton.kinds?.PRIMARY} ariaLabel='My primary IconButton' />
      <IconButton
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary IconButton'
      />
      <IconButton
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My primary IconButton'
        shape='Square'
      />
      <IconButton
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary IconButton'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

<Tip>
  If you need to use an icon as a button that opens dialog or menu next to it, check out{' '}
  <Link href='/?path=/docs/buttons-menubutton--overview' size={Link.sizes.SMALL} withoutSpacing>
    Menu button
  </Link>{' '}
  component.
</Tip>

### Sizes

<Canvas>
  <Story name='Sizes'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My small IconButton'
        key='small'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My small IconButton'
        key='small'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My large IconButton'
        key='large'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My large IconButton'
        key='large'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Icon

<Canvas>
  <Story name='Icon'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My Primary Small Icon Button'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My Primary Large Icon Button'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My Primary Small Icon Button'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My Primary Large Icon Button'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Icon + Label

<Canvas>
  <Story name='Icon + Label'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My IconLabel Button'
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My IconLabel Button'
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My IconLabel Button'
        label='label'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My IconLabel Button'
        label='label'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Icon tertiary

<Canvas>
  <Story name='Icon tertiary'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My Tertiary Small Icon Button'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My Tertiary Large Icon Button'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My Tertiary Small Icon Button'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My Tertiary Large Icon Button'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Icon + Label tertiary

<Canvas>
  <Story name='Icon + Label tertiary'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My Tertiary Small Icon Button With Label'
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My Tertiary Large Icon Button With Label'
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My Tertiary Small Icon Button With Label'
        label='label'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My Tertiary Large Icon Button With Label'
        label='label'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Label

<Canvas>
  <Story name='Label'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My Primary Small Label Button'
        labelInButton='01'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My Primary Large Label Button'
        labelInButton='01'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My Primary Small Label Button'
        labelInButton='01'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My Primary Large Label Button'
        labelInButton='01'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Label + Label

<Canvas>
  <Story name='Label + Label'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My primary small Label Button'
        labelInButton='01'
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My primary large Label Button'
        labelInButton='01'
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My primary small Label Button'
        labelInButton='01'
        label='label'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My primary large Label Button'
        labelInButton='01'
        label='label'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Label tertiary

<Canvas>
  <Story name='Label tertiary'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary small Label Button'
        labelInButton='01'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary large Label Button'
        labelInButton='01'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary small Label Button'
        labelInButton='01'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary large Label Button'
        labelInButton='01'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Label + Label tertiary

<Canvas>
  <Story name='Label + Label tertiary'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary small Label Button'
        labelInButton='01'
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary large Label Button'
        labelInButton='01'
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary small Label Button'
        labelInButton='01'
        label='label'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My tertiary large Label Button'
        labelInButton='01'
        label='label'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Active

<Canvas>
  <Story name='Active'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My active large IconButton'
        active
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My active large IconButton'
        active
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My active large IconButton'
        active
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My active large IconButton'
        active
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My active medium IconButton'
        active
        label='label'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My active medium IconButton'
        active
        label='label'
        labelInButton='01'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My active medium IconButton'
        active
        label='label'
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My active medium IconButton'
        active
        label='label'
        labelInButton='01'
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

### Disabled

Set disable button for something that isn’t usable. Use a tooltip on hover in order to indicate the reason of the disabled action.

<Canvas>
  <Story name='Disabled'>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My small disabled IconButton'
        disabledReason='This function is not available'
        disabled
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My large disabled IconButton'
        disabledReason='This function is not available'
        disabled
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My disabled large IconButton'
        disabledReason='This function is not available'
        disabled
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My disabled large IconButton'
        label='label'
        disabledReason='This function is not available'
        disabled
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My disabled large IconButton'
        label='label'
        disabledReason='This function is not available'
        disabled
      />
    </div>
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <IconButton
        size={IconButton.sizes?.SMALL}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My small disabled IconButton'
        disabledReason='This function is not available'
        disabled
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My large disabled IconButton'
        disabledReason='This function is not available'
        disabled
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My disabled large IconButton'
        disabledReason='This function is not available'
        disabled
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.PRIMARY}
        ariaLabel='My disabled large IconButton'
        label='label'
        disabledReason='This function is not available'
        disabled
        shape='Square'
      />
      <IconButton
        size={IconButton.sizes?.LARGE}
        icon={Close}
        kind={IconButton.kinds?.TERTIARY}
        ariaLabel='My disabled large IconButton'
        label='label'
        disabledReason='This function is not available'
        disabled
        shape='Square'
      />
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <DialogContentContainer>
            <IconButton icon={Pin} ariaLabel='Pin to top' />
            <IconButton icon={Show} ariaLabel='Show all' />
            <IconButton icon={Broom} ariaLabel='Clear style' />
          </DialogContentContainer>
        ),
        description:
          'Use Icon button when action is lower priority than a regular action or there’s no space available to place a button.',
      },
      negative: {
        component: <IconButton icon={Add} kind={IconButton.kinds?.PRIMARY} ariaLabel='Add item' />,
        description: (
          <>
            Don’t use Icon button as the main action on the page. Instead, use the{' '}
            <Link href='/?path=/docs/buttons-button--overview' withoutSpacing>
              Button component
            </Link>{' '}
            with an icon.
          </>
        ),
      },
    },
    {
      positive: {
        component: <IconButton icon={Close} ariaLabel='Close' />,
        description: 'Always provide ariaLabel or tooltipContent',
      },
      negative: {
        component: <IconButton icon={Close} />,
        description: 'Don’t use icon button without adding a tooltip while hovering.',
      },
    },
  ]}
/>

## Use cases and examples

### Icon button as toolbar button

<Canvas>
  <Story name='Icon button as toolbar button'>
    <Flex
      className={classes.dashboard}
      direction={Flex.directions.COLUMN}
      align={Flex.align.START}
      style={{ width: '50%' }}
    >
      <Flex className={classes.dashboardHeader} gap={Flex.gaps.SMALL}>
        <Icon icon={Drag} />
        <Heading type={Heading.types?.h5} value='Widget name' />
        <IconButton
          icon={Filter}
          ariaLabel='Filter the widget by everything'
          size={IconButton.sizes?.SMALL}
        />
      </Flex>
      <div className={classes.dashboardContent} />
    </Flex>
  </Story>
</Canvas>

### Icon button as close button

<Canvas>
  <Story name='Icon button as close button'>
    <Flex style={{ width: '100%' }}>
      <Flex
        className={classes.recycleBin}
        style={{ width: '100%' }}
        justify={Flex.justify.START}
        gap={Flex.gaps.LARGE}
      >
        <Flex
          direction={Flex.directions.COLUMN}
          className={classes.recycleBinTitleContainer}
          justify={Flex.justify.CENTER}
        >
          <Icon icon={Item} iconSize={40} />
          <Heading
            className={classes.recycleBinTitle}
            type={Heading.types?.h5}
            value='Item'
            id='l3-recycle-bin-title'
          />
        </Flex>
        <Avatar size={Avatar.sizes.LARGE} src={person1} type={Avatar.types.IMG} />
        <Flex
          direction={Flex.directions.COLUMN}
          className={classes.recycleBinContent}
          align={Flex.justify.START}
          ariaLabelledby='l3-recycle-bin-title'
        >
          <Flex gap={Flex.gaps.XS}>
            <LinkComponent text='Hadas Farhi' />
            <span>deleted the item </span>
            <span className={classes.recycleBinItemName}>Hello World</span>
            <span>from the board</span>
          </Flex>
          <span className={classes.recycleBinBoardName}>Tasks</span>
          <Flex gap={Flex.gaps.XS} className={classes.recycleBinSubNote}>
            <Icon icon={Time} />
            <span className={classes.recycleBinTimeStamp}>13m</span>
            <span>(Available for restore in the next 1M)</span>
          </Flex>
        </Flex>
        <Button className={classes.recycleBinRestoreButton}>Restore</Button>
      </Flex>
    </Flex>
    <IconButton icon={CloseSmall} ariaLabel='Remove from Recycle bin' />
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[BUTTON, MENU_BUTTON, BUTTON_GROUP]} />
