import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { THEME_WHITE, THEME_SECONDARY, LINK_THEMES as linkThemes } from '../../../constants/buttons';
import Link from '../Link';
import Badge from '../../badge/Badge';
import Icon from '../../icon/Icon';
import { linkMock } from '../../../../mocks/menu/link';
import '../styles/Link.story.scss';

export const emailAddress = 'appdirect@appdirect.com';
export const tel = '555-555-5555';
export const textSizes = ['xxLarge', 'xLarge', 'large', 1, 2, 3, 4, 5, 6, 7];

<Meta title="Atoms/Link" component={Link} />

# Link
<br />

## `Links` are hyperlink and used to link from one page to another
<br />

### Default
<Canvas>
    <Story name="Default">
        <Link href={linkMock.url}>Link</Link>
    </Story>
</Canvas>

### With icon
<Canvas>
    <Story name="With icon">
        <div className="component-wrapper">
            <Link icon="caretLeft" iconClass="story-large-icon" href={linkMock.url}>Back</Link>
        </div>
        <div className="component-wrapper">
            <Link icon="caretLeft" href={linkMock.url}>Back</Link>
        </div>
        <div className="component-wrapper">
            <Link icon="caretLeft" iconClass="story-small-icon" href={linkMock.url}>Back</Link>
        </div>
    </Story>
</Canvas>

### Icon alignment
<Canvas>
    <Story name="Icon alignment">
        <div className="component-wrapper">
            <Link icon="caretRight" iconClass="story-large-icon" iconPosition="right" href={linkMock.url}>Next</Link>
        </div>
        <div className="component-wrapper">
            <Link icon="caretRight" iconPosition="right" href={linkMock.url}>Next</Link>
        </div>
        <div className="component-wrapper">
            <Link icon="caretRight" iconClass="story-small-icon" iconPosition="right" href={linkMock.url}>Next</Link>
        </div>
    </Story>
</Canvas>

### Icon only
<Canvas>
    <Story name="Icon only">
        <div className="component-wrapper">
            <Link icon="facebook" iconClass="story-large-icon" href={linkMock.url} hiddenText>Facebook</Link>
        </div>
        <div className="component-wrapper">
            <Link icon="facebook" href={linkMock.url} hiddenText>Facebook</Link>
        </div>
        <div className="component-wrapper">
            <Link icon="facebook" iconClass="story-small-icon" href={linkMock.url} hiddenText>Facebook</Link>
        </div>
    </Story>
</Canvas>

### Sizes
<Canvas>
    <Story name="Sizes">
        {textSizes.map(size => (
            <div className={`component-wrapper story_text--${size}`} style={{ lineHeight: '1em' }}>
                <Link icon="caretRight" iconPosition="right" href={linkMock.url}>{`Size ${size}`}</Link>
            </div>
        ))}
    </Story>
</Canvas>

### External link
<Canvas>
    <Story name="External link">
        <Link target="_blank" href={linkMock.url}>External link</Link>
    </Story>
</Canvas>

### Custom icon
<Canvas>
    <Story name="Custom icon">
        <Link href={linkMock.url} iconSrc="https://via.placeholder.com/30">External link</Link>
    </Story>
</Canvas>

### Mailto
<Canvas>
    <Story name="Mailto">
        <span>Mail to: </span>
        <Link href={`mailto: ${emailAddress}`}>{emailAddress}</Link>
    </Story>
</Canvas>

### Telephone
<Canvas>
    <Story name="Telephone">
        <span>Call: </span>
        <Link href={`tel: ${tel}`}>{tel}</Link>
    </Story>
</Canvas>

### Anchor
<Canvas>
    <Story name="Anchor">
        <div id="top" style={{ padding: '200px 50px', marginBottom: 50, height: '200vh', backgroundColor: '#FAFAFA' }}>
            Scroll down to view the link
        </div>
        <Link href="#top" iconPosition="right" icon="caretUp">Scroll to top</Link>
    </Story>
</Canvas>

### Theme Links
<Canvas>
    <Story name="Theme links">
        {linkThemes.map(theme => (
            <div key={theme} style={{ padding: '5px 10px', background: (theme === THEME_WHITE || theme === THEME_SECONDARY) ? '#000' : 'transparent' }}>
                <Link theme={theme} href={linkMock.url}>{`Default-${theme}`}</Link>
            </div>
        ))}
    </Story>
</Canvas>

### With extra icon content
<Canvas>
    <Story name="With extra icon content">
        <div>
            <h2>Badge</h2>
            <Link
                icon="cart"
                href={linkMock.url}
                iconExtraContent={<Badge className="story-extra-icon story-badge" label={3} />}
            >
                Cart
            </Link>
        </div>
        <div>
            <h2>Favorite</h2>
            <Link
                icon="user"
                href={linkMock.url}
                iconExtraContent={<Icon className="story-extra-icon story-star" type="star" />}
            >
                Favorite User
            </Link>
        </div>
    </Story>
</Canvas>

## Usage Example
```jsx
import Link from '@appdirect/sfb-theme-components/src/atoms/link/Link';

<Link href="https://www.google.ca/">Google</Link>
```

## Props
<ArgsTable of={Link} />
