import { tokens } from '@preply/ds-core';
import { Button, Heading, LayoutGrid, LayoutGridItem } from '@preply/ds-web-lib';
import React from 'react';

const TextToken = ({
    inverted,
    textToken,
}: {
    inverted?: boolean;
    textToken: keyof typeof tokens.color.text;
}) => {
    const token = tokens.color.text[textToken];

    // This excludes all the composite tokens (like color.text.ghost.action) since we want to target
    // only color.text.*
    if (!Array.isArray(token)) return null;

    return (
        <LayoutGridItem key={textToken}>
            <Heading tag="h4" variant="medium">
                {textToken}
            </Heading>
            {/* <State variant={name} state="disabled" colors={color[1]} /> */}
            <div
                style={{
                    color: `var(--${token[1]})`,
                    maxWidth: '240px',
                    padding: '10px',
                    background: `var(--${
                        inverted
                            ? tokens.color.background.primaryInverted[1]
                            : tokens.color.background.primary[1]
                    })`,
                }}
            >
                <code>color.text.{textToken}</code>
            </div>
        </LayoutGridItem>
    );
};
TextToken.defaultProps = {
    inverted: false,
};

const BackgroundToken = ({
    inverted,
    bgToken,
}: {
    inverted?: boolean;
    bgToken: keyof typeof tokens.color.background;
}) => {
    const token = tokens.color.background[bgToken];

    // This excludes all the composite tokens (like color.text.ghost.action) since we want to target
    // only color.text.*
    if (!Array.isArray(token)) return null;

    return (
        <LayoutGridItem key={bgToken}>
            <Heading tag="h4" variant="medium">
                {bgToken}
            </Heading>

            <div
                style={{
                    background: `var(--${tokens.color.background[bgToken][1]})`,
                    color: `var(--${
                        inverted ? tokens.color.text.inverted[1] : tokens.color.text.primary[1]
                    })`,
                    maxWidth: '240px',
                    padding: '10px',
                }}
            >
                Background token: <code>color.background.{bgToken}</code>
            </div>
        </LayoutGridItem>
    );
};
BackgroundToken.defaultProps = {
    inverted: false,
};

const BorderToken = ({ contentToken }: { contentToken: keyof typeof tokens.color.border }) => {
    const token = tokens.color.border[contentToken];

    // This excludes all the composite tokens (like color.text.ghost.action) since we want to target
    // only color.text.*
    if (!Array.isArray(token)) return null;

    return (
        <LayoutGridItem key={contentToken}>
            <Heading tag="h4" variant="medium">
                {contentToken}
            </Heading>
            <br />
            <div
                style={{
                    border: `1px solid var(--${token[1]})`,
                    background: `transparent`,
                    color: `var(--${token[1]})`,
                    maxWidth: '240px',
                    height: '50px',
                    padding: '10px',
                }}
            >
                color.border.{contentToken}
            </div>
        </LayoutGridItem>
    );
};
BorderToken.defaultProps = {};

export const Buttons = () => {
    return (
        <LayoutGrid gap="16" columns={2}>
            <Button>Token family: action.variant.primary.*</Button>
            <Button variant="secondary">Token family: action.variant.secondary.*</Button>
            <Button variant="tertiary">Token family: action.variant.tertiary.*</Button>
            <Button variant="ghost">Token family: action.variant.ghost.*</Button>
            <Button variant="critical">Token family: action.variant.critical.*</Button>
            <Button variant="onColor">Token family: action.variant.onColor.*</Button>
            <Button variant="inverted">Token family: action.variant.inverted.*</Button>

            <Button disabled>Token family: action.variant.disabled.*</Button>
        </LayoutGrid>
    );
};

export const TextTokens = () => (
    <LayoutGrid gap="16" columns={4}>
        <TextToken textToken="primary" />
        <TextToken textToken="secondary" />
        <TextToken textToken="tertiary" />
        <TextToken textToken="accentDark" />
        <TextToken textToken="placeholder" />
        <TextToken textToken="inverted" inverted />
        <TextToken textToken="positive" />
        <TextToken textToken="info" />
        <TextToken textToken="warning" />
        <TextToken textToken="critical" />
    </LayoutGrid>
);

export const BackgroundTokens = () => (
    <LayoutGrid gap="16" columns={4}>
        <BackgroundToken bgToken="primary" />
        <BackgroundToken bgToken="secondary" />
        <BackgroundToken bgToken="tertiary" />
        <BackgroundToken bgToken="overlay" />
        <BackgroundToken bgToken="disabled" />
        <BackgroundToken bgToken="brand" />
        <BackgroundToken bgToken="brandB2b" />
        <BackgroundToken bgToken="accentLight" />
        <BackgroundToken bgToken="accentDark" inverted />
        <BackgroundToken bgToken="positiveLight" />
        <BackgroundToken bgToken="positiveDark" inverted />
        <BackgroundToken bgToken="infoLight" />
        <BackgroundToken bgToken="infoDark" inverted />
        <BackgroundToken bgToken="warningLight" />
        <BackgroundToken bgToken="warningDark" inverted />
        <BackgroundToken bgToken="criticalLight" />
        <BackgroundToken bgToken="criticalDark" inverted />
        <BackgroundToken bgToken="statusOnline" />
        <BackgroundToken bgToken="statusOffline" />
        <BackgroundToken bgToken="primaryInverted" inverted />
        <BackgroundToken bgToken="secondaryInverted" inverted />
        <BackgroundToken bgToken="tertiaryInverted" inverted />
    </LayoutGrid>
);

export const BorderTokens = () => (
    <LayoutGrid gap="16" columns={4}>
        <BorderToken contentToken="primary" />
        <BorderToken contentToken="secondary" />
        <BorderToken contentToken="secondary-opacity" />
        <BorderToken contentToken="tertiary" />
        <BorderToken contentToken="disabled" />
        <BorderToken contentToken="brand" />
        <BorderToken contentToken="critical" />
        <BorderToken contentToken="focus" />
        <BorderToken contentToken="positive" />
    </LayoutGrid>
);
