/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-7367fcb
 * Released under the MIT license.
 */

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Layout } from '../../components/content/Layout/index.js';
import { tasty } from '../../tasty/index.js';
import { Button } from './components/Button.js';
import { Card } from './components/Card.js';
import { ScrollProgress } from './components/ScrollProgress.js';
const PreviewContent = tasty({
    styles: {
        display: 'flex',
        flex: 1,
        placeContent: 'center',
        placeItems: 'center',
        overflow: 'auto',
        padding: '4x',
        fill: '#light',
        // Checkered pattern to show transparency
        backgroundImage: 'linear-gradient(45deg, #dark.05 25%, transparent 25%), linear-gradient(-45deg, #dark.05 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dark.05 75%), linear-gradient(-45deg, transparent 75%, #dark.05 75%)',
        backgroundSize: '20px 20px',
        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
    },
});
const StateRow = tasty({
    styles: {
        display: 'flex',
        gap: '2x',
        placeItems: 'center',
    },
});
const StateLabel = tasty({
    styles: {
        display: 'inline-flex',
        width: '80px',
        preset: 't4',
        color: '#dark-03',
    },
});
const ButtonColumn = tasty({
    styles: {
        display: 'flex',
        flow: 'column',
        gap: '12px',
        padding: '3x',
        radius: '1r',
    },
    styleProps: ['fill'],
});
// Button state configurations for forced preview
const BUTTON_STATES = [
    {
        label: 'Default',
        mods: { hovered: false, focused: false, pressed: false, disabled: false },
    },
    {
        label: 'Hovered',
        mods: { hovered: true, focused: false, pressed: false, disabled: false },
    },
    {
        label: 'Focused',
        mods: { hovered: false, focused: true, pressed: false, disabled: false },
    },
    {
        label: 'Pressed',
        mods: { hovered: false, focused: false, pressed: true, disabled: false },
    },
    {
        label: 'Disabled',
        mods: { hovered: false, focused: false, pressed: false, disabled: true },
        isDisabled: true,
    },
    {
        label: 'Hover+Focus',
        mods: { hovered: true, focused: true, pressed: false, disabled: false },
    },
];
export function PlaygroundPreview({ component, styles, }) {
    return (_jsxs(Layout, { height: "100%", children: [_jsxs(Layout.Toolbar, { children: ["Preview: ", component] }), _jsx(Layout.Content, { padding: 0, children: _jsxs(PreviewContent, { children: [component === 'card' && _jsx(Card, { styles: styles }), component === 'scroll-progress' && (_jsx(ScrollProgress, { styles: styles })), component === 'button' && (_jsxs("div", { style: { display: 'flex', gap: '24px' }, children: [_jsx("div", { style: {
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '12px',
                                        padding: '24px 0',
                                    }, children: BUTTON_STATES.map((state) => (_jsx(StateLabel, { style: { height: '32px' }, children: state.label }, state.label))) }), _jsx(ButtonColumn, { children: BUTTON_STATES.map((state) => (_jsx(Button, { styles: styles, isDisabled: 'isDisabled' in state ? state.isDisabled : false, mods: state.mods, children: "Button" }, state.label))) }), _jsx(ButtonColumn, { fill: "#white", children: BUTTON_STATES.map((state) => (_jsx(Button, { styles: styles, isDisabled: 'isDisabled' in state ? state.isDisabled : false, mods: state.mods, children: "Button" }, state.label))) })] }))] }) })] }));
}

        