import React from 'react';
import { spacing, color, radius, motion, HeadingVariant, TextVariant } from '@preply/ds-core';

import styled from 'styled-components';
import { getTokenVar as t } from '@preply/ds-web-core';
import { LanguageData, englishData } from './data';
import { Badge, Heading, Text } from '@preply/ds-web-lib';
import { useFontsExplorerState } from './FontsExplorerProvider';

const Container = styled.div`
    border: 2px solid ${t(color.border.tertiary)};
    border-radius: ${t(radius[8])};
    padding: ${t(spacing[16])};

    display: flex;
    flex-direction: column;
    gap: ${t(spacing[16])};

    cursor: pointer;
    background-color: ${t(color.background.primary)};
    transition: background-color ${t(motion.components.interaction)};
    &:hover {
        background-color: ${t(color.background.secondary)};
    }
`;

const Badges = styled.div`
    display: flex;
    gap: ${t(spacing[4])};
`;

const Variants = styled.div`
    display: grid;
    grid-template-columns: auto 1fr;
    gap: ${t(spacing[8])};
    align-items: center;

    &[data-transform='uppercase'] *[data-value] {
        text-transform: uppercase;
    }
    &[data-transform='lowercase'] *[data-value] {
        text-transform: lowercase;
    }
`;

function HeadingRow({
    variant,
    data,
    showWhenCollapsed = false,
}: {
    variant: HeadingVariant;
    data: LanguageData;
    showWhenCollapsed?: boolean;
}) {
    const [state] = useFontsExplorerState();
    const { code } = data;

    const isExpanded = state.expanded.includes(code);
    const text = state.text || data.text;
    const showEn = code !== 'en' && !state.text;

    if (!isExpanded && !showWhenCollapsed) {
        return null;
    }

    if (showEn && isExpanded) {
        return (
            <>
                <Text variant="caption-regular" accent="secondary">
                    {variant}
                </Text>
                <Heading tag="div" variant={variant} dataset={{ value: true }}>
                    {text}
                </Heading>
                <Text variant="caption-regular" accent="secondary">
                    {variant}
                </Text>
                <Heading tag="div" variant={variant} dataset={{ value: true }}>
                    {englishData.text}
                </Heading>
            </>
        );
    }

    return (
        <>
            <Text variant="caption-regular" accent="secondary">
                {variant}
            </Text>
            <Heading tag="div" variant={variant} dataset={{ value: true }}>
                {text}
            </Heading>
        </>
    );
}

function TextRow({
    variant,
    data,
    showWhenCollapsed = false,
}: {
    variant: TextVariant;
    data: LanguageData;
    showWhenCollapsed?: boolean;
}) {
    const [state] = useFontsExplorerState();
    const { code } = data;

    const isExpanded = state.expanded.includes(code);
    const text = state.text || data.text;
    const showEn = code !== 'en' && !state.text;

    if (!isExpanded && !showWhenCollapsed) {
        return null;
    }

    if (showEn && isExpanded) {
        return (
            <>
                <Text variant="caption-regular" accent="secondary">
                    {variant}
                </Text>
                <Text variant={variant} dataset={{ value: true }}>
                    {text}
                </Text>
                <Text variant="caption-regular" accent="secondary">
                    {variant}
                </Text>
                <Text variant={variant} dataset={{ value: true }}>
                    {englishData.text}
                </Text>
            </>
        );
    }

    return (
        <>
            <Text variant="caption-regular" accent="secondary">
                {variant}
            </Text>
            <Text variant={variant} dataset={{ value: true }}>
                {text}
            </Text>
        </>
    );
}

type Props = {
    data: LanguageData;
};

export function LanguageCard({ data }: Props) {
    const [state, dispatch] = useFontsExplorerState();
    const { code, name } = data;

    if (!state.visible.includes(code)) {
        return null;
    }

    return (
        <Container
            lang={code}
            onClick={() => {
                // Prevent the click from being triggered if the user is selecting text
                if (window.getSelection()?.type === 'Range') return;

                dispatch({ type: 'toggle-expand', lang: code });
            }}
        >
            <Badges>
                <Badge size="small">{name}</Badge>
                <Badge size="small">{code}</Badge>
            </Badges>

            <Variants data-transform={state.textTransform}>
                <HeadingRow variant="massive" data={data} />
                <HeadingRow variant="huge" data={data} />
                <HeadingRow variant="extraLarge" data={data} />
                <HeadingRow variant="large" data={data} showWhenCollapsed />
                <HeadingRow variant="medium" data={data} />
                <HeadingRow variant="small" data={data} />

                <TextRow variant="caption-regular" data={data} />
                <TextRow variant="caption-semibold" data={data} />
                <TextRow variant="small-regular" data={data} />
                <TextRow variant="small-regular-italic" data={data} />
                <TextRow variant="small-semibold" data={data} />
                <TextRow variant="small-semibold-italic" data={data} />
                <TextRow variant="default-regular" data={data} showWhenCollapsed />
                <TextRow variant="default-regular-italic" data={data} />
                <TextRow variant="default-semibold" data={data} />
                <TextRow variant="default-semibold-italic" data={data} />
                <TextRow variant="large-regular" data={data} />
                <TextRow variant="large-regular-italic" data={data} />
                <TextRow variant="large-semibold" data={data} />
                <TextRow variant="large-semibold-italic" data={data} />
            </Variants>
        </Container>
    );
}