import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {formatTags} from '../../docs/utils';
import Link, {LINK_ALIGN, LINK_SIZE, LINK_TRANSFORM, LINK_WEIGHT} from './Link';
import Text from './Text';
import {
  TEXT_COLOR,
  TEXT_SIZE,
  TEXT_WEIGHT,
  TEXT_TRANSFORM,
  TEXT_ALIGN,
} from './textConsts';
import LinkA11y from './stories/Link.a11y.mdx';
import PageHeader from 'blocks/PageHeader';
import Flex from '../flex/Flex';
import {StoryVariant} from '../../docs/utils';

<Meta
  title="Components/Link"
  component={Link}
  argTypes={{
    children: {control: 'text'},
    as: {
      table: {
        defaultValue: {summary: 'a'},
      },
    },
    size: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(LINK_SIZE)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(LINK_SIZE),
      },
    },
    weight: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(LINK_WEIGHT)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(LINK_WEIGHT),
      },
    },
    transform: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(LINK_TRANSFORM)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(LINK_TRANSFORM),
      },
    },
    align: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(LINK_ALIGN)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(LINK_ALIGN),
      },
    },
    noWrap: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
    breakWords: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
    color: {
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_COLOR)),
        },
      },
      control: {
        type: 'select',
        options: TEXT_COLOR,
      },
    },
    target: {
      control: 'select',
    },
    onClick: {
      table: {
        category: 'Event',
      },
    },
    underlined: {
      table: {
        defaultValue: {summary: false},
      },
    },
    unstyled: {
      table: {
        defaultValue: {summary: false},
      },
    },
    disabled: {
      table: {
        defaultValue: {summary: false},
      },
    },
    inherited: {
      table: {
        defaultValue: {summary: false},
      },
    },
    emphasised: {
      table: {
        defaultValue: {summary: true},
      },
    },
    newTabLabel: {
      table: {
        defaultValue: {summary: '(opens in a new tab)'},
      },
    },
    hideNewTabIndicator: {
      table: {
        defaultValue: {summary: false},
      },
    },
  }}
  args={{
    children: 'Read more about Link component',
    href: '#',
  }}
/>

<PageHeader>Link</PageHeader>

- [Stories](#stories)
- [Responsive props](#responsive-props)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story name="Default">{args => <Link {...args} />}</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Nested

<Canvas>
  <Story name="Nested">
    {args => (
      <Text as="h2" color={TEXT_COLOR['text-red-60']}>
        Outer text-
        <Link as="button" inherited {...args}>
          nested Link with inherited styles
        </Link>
      </Text>
    )}
  </Story>
</Canvas>

### Opens in a new tab

<Canvas>
  <Story name="Open in a new tab">
    {args => (
      <Link
        href="https://en.wikipedia.org/wiki/Red_panda"
        target="_blank"
        {...args}
      >
        Read more about red pandas
      </Link>
    )}
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_SIZE).map(size => (
          <StoryVariant label={`size - ${size}`} key={size}>
            <Link {...args} size={size}>
              Some text
            </Link>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_COLOR).map(color => (
          <StoryVariant label={`color - ${color}`} key={color}>
            <div
              style={{backgroundColor: color === 'text-white' ? '#c3d1dd' : ''}}
            >
              <Link {...args} color={color}>
                Some text
              </Link>
            </div>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Underlined

<Canvas>
  <Story name="Underlined">
    {args => (
      <Link {...args} underlined>
        Some text
      </Link>
    )}
  </Story>
</Canvas>

### Weight

<Canvas>
  <Story name="Weight">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_WEIGHT).map(weight => (
          <StoryVariant label={`weight - ${weight}`} key={weight}>
            <Link {...args} weight={weight}>
              Some text
            </Link>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Transform

<Canvas>
  <Story name="Transform">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_TRANSFORM).map(transform => (
          <StoryVariant label={`transform - ${transform}`} key={transform}>
            <Link {...args} transform={transform}>
              Some text
            </Link>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Align

<Canvas>
  <Story name="Align">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_ALIGN).map(align => (
          <StoryVariant label={`align - ${align}`} key={align} width={400}>
            <Link {...args} align={align} style={{display: 'block'}}>
              Aliquip sit pariatur laboris in aliqua. Enim esse eu est nisi
              eiusmod minim deserunt ut cupidatat dolore velit deserunt nisi.
              Enim in anim aute non.
            </Link>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### No wrap on white space

<Canvas>
  <Story name="White space no wrap">
    {args => (
      <div style={{border: '1px solid gray', width: '400px'}}>
        <Link {...args} noWrap>
          Aliquip sit pariatur laboris in aliqua. Enim esse eu est nisi eiusmod.
        </Link>
      </div>
    )}
  </Story>
</Canvas>

### Break words

<Canvas>
  <Story name="Break words">
    {args => (
      <div style={{border: '1px solid gray', width: '400px'}}>
        <Link {...args} breakWords>
          very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-word
        </Link>
      </div>
    )}
  </Story>
</Canvas>

## Responsive props

To control styles that differ across screen sizes you can use responsive props. All props marked as Responsive support [object and array syntax](/story/foundation-✨-responsive-props--page).

Resize window to check how component is changing flex direction and item margins based on window width.

<Canvas>
  <Link
    size={[LINK_SIZE.SMALL, LINK_SIZE.MEDIUM, null, LINK_SIZE.LARGE]}
    weight={[LINK_WEIGHT.REGULAR, LINK_WEIGHT.BOLD]}
  >
    Responsive size
  </Link>
</Canvas>

<LinkA11y />