import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
import { View } from 'react-native';
import { colorPalette, mainColors, fontVariant } from '../../primitives';
import { hexToRGBA } from '../../utils';
import { HorizontalSpacer, HorizontalDivider, Typography } from '..';
import FontVariantImage from './assets/fontVariant.png';
import { FontWeight } from './types';

<Meta
    title="Foundation/Typography"
    component={Typography}
    argTypes={{
        color: {
            control: { type: 'color' },
        },
    }}
/>

export const System = () => {
    const CONFIGS = [
        {
            title: 'Body',
            items: [
                {
                    fontType: 'body',
                    fontSize: 11,
                    fontWeight: FontWeight.REGULAR,
                    color: '#000000',
                    children: 'gilroy body regular 11',
                },
                {
                    fontType: 'body',
                    fontSize: 12,
                    fontWeight: FontWeight.REGULAR,
                    color: '#000000',
                    children: 'gilroy body regular 12',
                },
                {
                    fontType: 'body',
                    fontSize: 13,
                    fontWeight: FontWeight.REGULAR,
                    color: '#000000',
                    children: 'gilroy body regular 13',
                },
                {
                    fontType: 'body',
                    fontSize: 14,
                    fontWeight: FontWeight.REGULAR,
                    color: '#000000',
                    children: 'gilroy body regular 14',
                },
                {
                    fontType: 'body',
                    fontSize: 15,
                    fontWeight: FontWeight.REGULAR,
                    color: '#000000',
                    children: 'gilroy body regular 15',
                },
                {
                    fontType: 'body',
                    fontSize: 16,
                    fontWeight: FontWeight.REGULAR,
                    color: '#000000',
                    children: 'gilroy body regular 16',
                },
                {
                    fontType: 'body',
                    fontSize: 11,
                    fontWeight: FontWeight.MEDIUM,
                    color: '#000000',
                    children: 'gilroy body medium 11',
                },
                {
                    fontType: 'body',
                    fontSize: 12,
                    fontWeight: FontWeight.MEDIUM,
                    color: '#000000',
                    children: 'gilroy body medium 12',
                },
                {
                    fontType: 'body',
                    fontSize: 13,
                    fontWeight: FontWeight.MEDIUM,
                    color: '#000000',
                    children: 'gilroy body medium 13',
                },
                {
                    fontType: 'body',
                    fontSize: 14,
                    fontWeight: FontWeight.MEDIUM,
                    color: '#000000',
                    children: 'gilroy body medium 14',
                },
                {
                    fontType: 'body',
                    fontSize: 15,
                    fontWeight: FontWeight.MEDIUM,
                    color: '#000000',
                    children: 'gilroy body medium 15',
                },
                {
                    fontType: 'body',
                    fontSize: 16,
                    fontWeight: FontWeight.MEDIUM,
                    color: '#000000',
                    children: 'gilroy body medium 16',
                },
            ],
        },
        {
            title: 'Caps',
            items: [
                {
                    fontType: 'caps',
                    fontSize: 10,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy caps extra bold 10',
                },
                {
                    fontType: 'caps',
                    fontSize: 12,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy caps extra bold 12',
                },
                {
                    fontType: 'caps',
                    fontSize: 10,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'gilroy caps bold 10',
                },
                {
                    fontType: 'caps',
                    fontSize: 12,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'gilroy caps bold 12',
                },
                {
                    fontType: 'caps',
                    fontSize: 10,
                    fontWeight: FontWeight.SEMI_BOLD,
                    color: '#000000',
                    children: 'gilroy caps semi bold 10',
                },
                {
                    fontType: 'caps',
                    fontSize: 12,
                    fontWeight: FontWeight.SEMI_BOLD,
                    color: '#000000',
                    children: 'gilroy caps semi bold 12',
                },
            ],
        },
        {
            title: 'Serif Heading',
            items: [
                {
                    fontType: 'serif-heading',
                    fontSize: 18,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'cirka heading bold 18',
                },
                {
                    fontType: 'serif-heading',
                    fontSize: 20,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'cirka heading bold 20',
                },
                {
                    fontType: 'serif-heading',
                    fontSize: 22,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'cirka heading bold 22',
                },
                {
                    fontType: 'serif-heading',
                    fontSize: 24,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'cirka heading bold 24',
                },
            ],
        },
        {
            title: 'Heading',
            items: [
                {
                    fontType: 'heading',
                    fontSize: 13,
                    fontWeight: FontWeight.SEMI_BOLD,
                    color: '#000000',
                    children: 'gilroy heading semi bold 13',
                },
                {
                    fontType: 'heading',
                    fontSize: 14,
                    fontWeight: FontWeight.SEMI_BOLD,
                    color: '#000000',
                    children: 'gilroy heading semi bold 14',
                },
                {
                    fontType: 'heading',
                    fontSize: 16,
                    fontWeight: FontWeight.SEMI_BOLD,
                    color: '#000000',
                    children: 'gilroy heading semi bold 16',
                },
                {
                    fontType: 'heading',
                    fontSize: 18,
                    fontWeight: FontWeight.SEMI_BOLD,
                    color: '#000000',
                    children: 'gilroy heading semi bold 18',
                },
                {
                    fontType: 'heading',
                    fontSize: 20,
                    fontWeight: FontWeight.SEMI_BOLD,
                    color: '#000000',
                    children: 'gilroy heading semi bold 20',
                },
                {
                    fontType: 'heading',
                    fontSize: 22,
                    fontWeight: FontWeight.SEMI_BOLD,
                    color: '#000000',
                    children: 'gilroy heading semi bold 22',
                },
                {
                    fontType: 'heading',
                    fontSize: 13,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'gilroy heading bold 13',
                },
                {
                    fontType: 'heading',
                    fontSize: 14,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'gilroy heading bold 14',
                },
                {
                    fontType: 'heading',
                    fontSize: 16,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'gilroy heading bold 16',
                },
                {
                    fontType: 'heading',
                    fontSize: 18,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'gilroy heading bold 18',
                },
                {
                    fontType: 'heading',
                    fontSize: 20,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'gilroy heading bold 20',
                },
                {
                    fontType: 'heading',
                    fontSize: 22,
                    fontWeight: FontWeight.BOLD,
                    color: '#000000',
                    children: 'gilroy heading bold 22',
                },
                {
                    fontType: 'heading',
                    fontSize: 13,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy heading extra bold 13',
                },
                {
                    fontType: 'heading',
                    fontSize: 14,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy heading extra bold 14',
                },
                {
                    fontType: 'heading',
                    fontSize: 15,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy heading extra bold 15',
                },
                {
                    fontType: 'heading',
                    fontSize: 16,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy heading extra bold 16',
                },
                {
                    fontType: 'heading',
                    fontSize: 18,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy heading extra bold 18',
                },
                {
                    fontType: 'heading',
                    fontSize: 20,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy heading extra bold 20',
                },
                {
                    fontType: 'heading',
                    fontSize: 22,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy heading extra bold 22',
                },
                {
                    fontType: 'heading',
                    fontSize: 44,
                    fontWeight: FontWeight.EXTRA_BOLD,
                    color: '#000000',
                    children: 'gilroy heading extra bold 44',
                },
            ],
        },
    ];
    return (
        <View style={{ marginBottom: 30 }}>
            {CONFIGS.map((config, index) => (
                <View key={`typography-${index}`} style={{ minWidth: '33%' }}>
                    <div className="cirka">
                        <Typography
                            {...fontVariant.HeadingBold22}
                            color={colorPalette.popBlack[400]}
                        >
                            {config.title}
                        </Typography>
                        <HorizontalDivider color={hexToRGBA(colorPalette.popBlack[100], 0.1)} />
                        <HorizontalSpacer n={2} />
                    </div>
                    <View
                        style={{
                            width: '100%',
                            display: 'grid',
                            gridTemplateColumns: 'repeat(2, 1fr)',
                            gridColumnGap: 10,
                        }}
                    >
                        {config.items.map((item, ind) => (
                            <div
                                key={`typography-config-${ind}`}
                                className={item.fontType === 'serif-heading' ? 'cirka' : 'gilroy'}
                            >
                                <Typography {...item} />
                            </div>
                        ))}
                    </View>
                    <HorizontalSpacer n={5} />
                </View>
            ))}
        </View>
    );
};

# Typography

Text wrapper that supports headings, serif-heading, caps, body, overflow, & overflow with ellipsis.

export const TypoTemplate = (args) => <Typography {...args} />;

## How to use?

1. Import `Typography` component from neopop-web.

```jsx
import { Typography } from 'neopop-react-native/components';
```

2. Import `fontVariant` primitive. It is a config that provides fontType, fontSize & fontWeight as per the design system. You can select the style as per this convention:

    <br />
    <img src={FontVariantImage} alt="" width="350" />
    <br />

```jsx
import { fontVariant } from 'neopop-react-native/primitives';

<Typography {...fontVariant.HeadingBold14}>neoPOP</Typography>;
```

3. Import colorPalette/colorGuide/mainColors primitive to assign text color as per the design system.
   NOTE: default `color` prop value is #FFFFFF

```jsx
import { colorPalette, fontVariant } from 'neopop-react-native/primitives';

<Typography {...fontVariant.HeadingBold14} color={colorPalette.popBlack[500]}>
    neoPOP
</Typography>;
```

🎉 You are all set!

## Variants

Here's what you can achieve from Typography component. No need to worry about line-height or line-spacing, Typography component handles it for you.

##### Heading

<Canvas>
    <Story
        name="Heading"
        args={{
            ...fontVariant.HeadingSemiBold16,
            color: mainColors.yellow,
            children: 'rewards for paying credit card bills.',
        }}
    >
        {TypoTemplate.bind({})}
    </Story>
</Canvas>

```jsx
import { Typography } from 'neopop-react-native/components';
import { colorPalette, fontVariant } from 'neopop-react-native/primitives';

const Heading = () => (
    <Typography {...fontVariant.HeadingSemiBold16} color={mainColors.yellow}>
        rewards for paying credit card bills.
    </Typography>
);

export default Heading;
```

##### Serif Heading

<Canvas>
    <Story
        name="Serif Heading"
        args={{
            ...fontVariant.CirkaHeadingBold20,
            color: mainColors.yellow,
            children: 'rewards for paying credit card bills.',
        }}
    >
        {TypoTemplate.bind({})}
    </Story>
</Canvas>

```jsx
import { Typography } from 'neopop-react-native/components';
import { colorPalette, fontVariant } from 'neopop-react-native/primitives';

const SerifHeading = () => (
    <Typography {...fontVariant.CirkaHeadingBold20} color={mainColors.yellow}>
        rewards for paying credit card bills.
    </Typography>
);

export default SerifHeading;
```

##### Caps

<Canvas>
    <Story
        name="Caps"
        args={{
            ...fontVariant.CapsBold10,
            color: mainColors.yellow,
            children: 'rewards for paying credit card bills.',
        }}
    >
        {TypoTemplate.bind({})}
    </Story>
</Canvas>

```jsx
import { Typography } from 'neopop-react-native/components';
import { colorPalette, fontVariant } from 'neopop-react-native/primitives';

const Caps = () => (
    <Typography {...fontVariant.CapsBold10} color={mainColors.yellow}>
        rewards for paying credit card bills.
    </Typography>
);

export default Caps;
```

##### Body

<Canvas>
    <Story
        name="Body"
        args={{
            ...fontVariant.BodyRegular16,
            color: mainColors.yellow,
            children: 'rewards for paying credit card bills.',
        }}
    >
        {TypoTemplate.bind({})}
    </Story>
</Canvas>

```jsx
import { Typography } from 'neopop-react-native/components';
import { colorPalette, fontVariant } from 'neopop-react-native/primitives';

const Body = () => (
    <Typography {...fontVariant.BodyRegular16} color={mainColors.yellow}>
        rewards for paying credit card bills.
    </Typography>
);

export default Body;
```

##### Overflow

<Canvas>
    <Story
        name="Overflow"
        args={{
            ...fontVariant.BodyRegular16,
            color: mainColors.yellow,
            children: 'rewards for paying credit card bills.',
            overflow: 'ellipsis',
            style: { width: 75 },
        }}
    >
        {TypoTemplate.bind({})}
    </Story>
</Canvas>

```jsx
import { Typography } from 'neopop-react-native/components';
import { colorPalette, fontVariant } from 'neopop-react-native/primitives';

const Overflow = () => (
    <Typography
        {...fontVariant.BodyRegular16}
        color={mainColors.yellow}
        overflow="ellipsis"
        style={{ width: 75 }}
    >
        rewards for paying credit card bills.
    </Typography>
);

export default Overflow;
```

##### Overflow with clamp

<Canvas>
    <Story
        name="Overflow with clamp"
        args={{
            ...fontVariant.BodyRegular16,
            color: mainColors.yellow,
            children: 'rewards for paying credit card bills.',
            overflow: 'ellipsis',
            lineClamp: 2,
            style: { width: 100 },
        }}
    >
        {TypoTemplate.bind({})}
    </Story>
</Canvas>

```jsx
import { Typography } from 'neopop-react-native/components';
import { colorPalette, fontVariant } from 'neopop-react-native/primitives';

const OverflowWithClamp = () => (
    <Typography
        {...fontVariant.BodyRegular16}
        color={mainColors.yellow}
        overflow="ellipsis"
        lineClamp={2}
        style={{ width: 100 }}
    >
        rewards for paying credit card bills.
    </Typography>
);

export default OverflowWithClamp;
```

## Props

<ArgsTable of={Typography} />

## StyleGuide

<System />

## Scope of Improvements

1. `className` prop support to reduce extra wrapper need.
2. `dangerouslySetInnerHTML` prop support to reduce extra wrapper need.