import React from 'react'
import withDesignTokens from 'addons/tokens/index.js'
import { Stories } from '@storybook/addon-docs'
import {
  ctrl,
  DocStoryList,
  DocStoryContainer,
  FlexCell,
  FlexList,
  FlexRow,
} from '../../../docs/blocks/index'
import { IconButton } from '../lib/index'
import { Help } from '../../icon/Help'
import { MoreIcon } from '../../icon/More'
import { A, Text } from '../../text'
import { useTokens } from '@kyper/tokenprovider'
import { MessageBox } from '../../messagebox'

const StoryList = () => (
  <DocStoryList stories={<Stories includePrimary={true} title="IconButton" />} />
)

export default {
  component: IconButton,
  decorators: [withDesignTokens],
  parameters: {
    controls: { hideNoControlsWarning: true },
    docs: {
      page: StoryList,
    },
    previewTabs: {
      canvas: { hidden: true },
      'storybook/docs/panel': { hidden: true },
    },
  },
  title: 'FORM COMPONENTS/IconButton/Code Examples',
}

const Template = args => {
  const tokens = useTokens()

  return (
    <DocStoryContainer title="IconButton Sandbox">
      <MessageBox
        style={{ marginBottom: tokens.Spacing.Medium }}
        title="IconButton must be used with @kyper/icon component"
      >
        <Text as="ParagraphSmall" tag="p">
          If you are using anything inside of it besides an icon then you should use the transparent
          variant of the{' '}
          <A href="/?path=/story/form-components-button-code-examples--button-variations">
            @kyper/button
          </A>
        </Text>
      </MessageBox>
      <FlexCell codeImport={`import { IconButton } from '@kyper/button'`} codeViewer="always">
        <IconButton aria-label="Help icon button" {...args}>
          <Help />
        </IconButton>
      </FlexCell>
    </DocStoryContainer>
  )
}

export const IconButtonSandbox = Template.bind({})
IconButtonSandbox.storyName = 'Sandbox'
IconButtonSandbox.args = {}
IconButtonSandbox.argTypes = {
  ariaLabelCheck: ctrl.hide,
}

const touchAreaCode = `
<IconButton
  aria-label="A11y friendly size touch area. "
  onClick={() => null}
  style={{ border: '1px dashed red' }}
>
  <MoreIcon />
</IconButton>
<IconButton
  aria-label="Small touch area"
  largeTouchTarget={false}
  onClick={() => null}
  style={{ border: '1px dashed red' }}
>
  <Help />
</IconButton>`

const customButtonSizeCode = `
<IconButton aria-label="Large IconButton" onClick={() => null}>
  <Help size={20} />
</IconButton>
<IconButton
  aria-label="Large IconButton"
  largeTouchTarget={false}
  onClick={() => null}
  style={{ marginLeft: tokens.Spacing.XSmall }}
>
  <Help size={50} />
</IconButton>`

export const IconButtonVariations = () => {
  const tokens = useTokens()

  return (
    <DocStoryContainer title="IconButton Variations">
      <FlexList>
        <FlexCell
          codeImport={`import { IconButton } from '@kyper/button'\nimport { Help } from '@kyper/icon/Help'`}
          codeViewer="collapse"
          title="Transparent variant(default)"
        >
          <IconButton aria-label="transparent IconButton variant(default)" onClick={() => null}>
            <Help />
          </IconButton>
          <IconButton
            aria-label="Disabled transparent IconButton variant"
            disabled={true}
            onClick={() => null}
          >
            <MoreIcon />
          </IconButton>
        </FlexCell>
        <FlexCell
          codeImport={`import { IconButton } from '@kyper/button'\nimport { Help } from '@kyper/icon/Help'`}
          codeViewer="collapse"
          title="Transparent tertiary variant"
        >
          <IconButton
            aria-label="transparent-tertiary IconButton variant"
            onClick={() => null}
            variant="transparent-tertiary"
          >
            <Help />
          </IconButton>
          <IconButton
            aria-label="Disabled transparent-tertiary IconButton"
            disabled={true}
            onClick={() => null}
            variant="transparent-tertiary"
          >
            <Help />
          </IconButton>
        </FlexCell>
        <FlexCell
          codeImport={`import { IconButton } from '@kyper/button'\nimport { Help } from '@kyper/icon/Help'\nimport { MoreIcon } from '@kyper/icon/MoreIcon'`}
          codeViewer="collapse"
          customCode={touchAreaCode}
          description={
            <Text>
              By default, the IconButtons have a touch area of 44px square. This is to make them
              more accessible. To read more on why this is important check here:
              <A
                href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html"
                style={{ marginLeft: tokens.Spacing.Tiny }}
                target="_blank"
              >
                Understanding a11y target size
              </A>
            </Text>
          }
          title="Touch target area"
        >
          <Text style={{ marginBottom: tokens.Spacing.Medium }} tag="p">
            The button touch area is highlighted below to help you see the difference when it is
            disabled.
          </Text>
          <FlexRow cellPad="0px">
            <IconButton
              aria-label="A11y friendly size touch area. "
              onClick={() => null}
              style={{ border: '1px dashed red' }}
            >
              <MoreIcon />
            </IconButton>
          </FlexRow>
          <FlexRow cellPad="0px">
            <Text>
              If you need to have the touch area to match the button size you can set
              `largeTouchTarget` to false.
            </Text>
            <IconButton
              aria-label="Small touch area"
              largeTouchTarget={false}
              onClick={() => null}
              style={{ border: '1px dashed red' }}
            >
              <Help />
            </IconButton>
          </FlexRow>
        </FlexCell>
        <FlexCell
          codeImport={`import { IconButton } from '@kyper/button'\nimport { Help } from '@kyper/icon/Help'`}
          codeViewer="collapse"
          customCode={customButtonSizeCode}
          description="You can change the size of the icon by using the icon components `size` prop. "
          title="IconButton sizes"
        >
          <IconButton aria-label="Large IconButton" onClick={() => null}>
            <Help size={20} />
          </IconButton>
          <IconButton
            aria-label="Large IconButton"
            largeTouchTarget={false}
            onClick={() => null}
            style={{ marginLeft: tokens.Spacing.XSmall }}
          >
            <Help size={50} />
          </IconButton>
        </FlexCell>
      </FlexList>
    </DocStoryContainer>
  )
}
IconButtonVariations.storyName = 'Variations'
