import { BREAKPOINT, tokens } from '@preply/ds-core';
import { getTokenVar } from '@preply/ds-web-core';
import React, { FC, ReactNode, useEffect, useState } from 'react';

/**
 * Inline previews and demos for the "Conventions/Responsive and shorthand
 * values" page. Components carry only the visuals; the token/breakpoint
 * data lives as static markdown in the MDX, so the page stays readable in
 * the generated LLM docs.
 */

function useActiveBreakpoint(): string | null {
    const [active, setActive] = useState<string | null>(null);

    useEffect(() => {
        const update = () => {
            const width = window.innerWidth;
            let name = '_';
            for (const [key, min] of Object.entries(BREAKPOINT).sort((a, b) => a[1] - b[1])) {
                if (width >= min) name = key;
            }
            setActive(name);
        };

        update();
        window.addEventListener('resize', update);
        return () => window.removeEventListener('resize', update);
    }, []);

    return active;
}

/**
 * A framed area for live responsive examples. Shows which breakpoint is
 * currently active, updating as the viewport is resized.
 */
export const ResponsiveDemo: FC<{ children: ReactNode }> = ({ children }) => {
    const active = useActiveBreakpoint();

    return (
        <div
            className="sb-unstyled"
            style={{
                display: 'flex',
                alignItems: 'center',
                gap: 16,
                padding: 24,
                margin: '16px 0',
                borderRadius: 12,
                background: getTokenVar(tokens.color.background.secondary),
            }}
        >
            {children}
            {active !== null && (
                <code
                    style={{
                        marginLeft: 'auto',
                        padding: '4px 10px',
                        borderRadius: 300,
                        fontSize: 13,
                        background: getTokenVar(tokens.color.background.primary),
                        border: `1px solid ${getTokenVar(tokens.color.border.primary)}`,
                        color: getTokenVar(tokens.color.text.secondary),
                        whiteSpace: 'nowrap',
                    }}
                >
                    active breakpoint: {active}
                </code>
            )}
        </div>
    );
};

/** A content box wrapped in a colored padding area set from shorthand values. */
export const PaddingDemo: FC<{ values: string | string[] }> = ({ values }) => {
    const padding = (Array.isArray(values) ? values : [values]).map(v => `${v}px`).join(' ');

    return (
        <span
            className="sb-unstyled"
            style={{
                display: 'inline-block',
                verticalAlign: 'middle',
                padding,
                borderRadius: 4,
                background: getTokenVar(tokens.color.background.accentLight),
            }}
        >
            <span
                style={{
                    display: 'block',
                    width: 56,
                    height: 24,
                    borderRadius: 2,
                    background: getTokenVar(tokens.color.background.primary),
                    boxShadow: `inset 0 0 0 1px ${getTokenVar(tokens.color.border.primary)}`,
                }}
            />
        </span>
    );
};