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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import copy from 'clipboard-copy';
import { useMemo, useState } from 'react';
import { CopyIcon, EyeIcon, EyeInvisibleIcon } from '../../../icons/index.js';
import { tasty } from '../../../tasty/index.js';
import { Action, Button } from '../../actions/index.js';
import { PrismCode, } from '../../content/PrismCode/PrismCode.js';
import { useToastsApi } from '../../overlays/Toasts/index.js';
import { Tooltip } from '../../overlays/Tooltip/Tooltip.js';
import { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger.js';
import { Card } from '../Card/Card.js';
const ActionElement = tasty(Action, {
    styles: {
        display: 'block',
        cursor: 'default',
        width: '100%',
    },
});
const StyledBlock = tasty({
    styles: {
        position: 'relative',
        overflow: {
            '': 'auto clip',
            multiline: 'auto',
        },
        width: 'initial auto 100%',
        height: {
            '': 'max 5x',
            multiline: 'auto',
        },
        boxSizing: 'border-box',
        whiteSpace: {
            '': 'initial',
            nowrap: 'nowrap',
        },
        scrollbar: 'styled',
        padding: '1.125x 1.5x',
        fade: {
            '': 'right 2x',
            multiline: false,
        },
        '& code': {
            font: {
                '': 'monospace',
                serif: true,
            },
        },
    },
});
const ButtonContainer = tasty({
    styles: {
        position: 'relative',
        display: 'flex',
        flow: {
            '': 'row-reverse',
            multiline: 'column',
        },
        placeContent: 'start',
        '$button-size': {
            '': '5x',
            multiline: '4x',
        },
        '$first-button-radius': {
            '': '0 1r 1r 0',
            multiline: '0 1r 0 0',
        },
        '$last-button-radius': {
            '': '0',
            multiline: '0 0 0 1r',
        },
        '$first-and-last-button-radius': {
            '': '0 1r 1r 0',
            multiline: '0 1r 0 1r',
        },
        // Make sure there's a small gap between buttons and the content
        border: 'left #clear',
    },
});
const CopySnippetElement = tasty(Card, {
    qa: 'CopySnippet',
    styles: {
        display: 'grid',
        gridRows: 'minmax(0, 1fr)',
        fill: '#dark-bg',
        border: 0,
        padding: 0,
        preset: 'default',
        radius: '1r',
        overflow: 'hidden',
        height: 'max-content',
        Grid: {
            display: 'grid',
            flow: 'row',
            gridColumns: 'minmax(0, 1fr) auto',
            gridRows: 'minmax(0, 1fr)',
            width: 'min 20x',
            position: 'relative',
        },
    },
});
const ActionButton = tasty(Button, {
    type: 'clear',
    styles: {
        width: '4x',
        padding: 0,
        placeSelf: 'stretch',
        border: '#clear',
        shadow: {
            '': 'inset 0 0 0 1ow #purple-03.0',
            focused: 'inset 0 0 0 1ow #purple-03',
        },
        outline: false,
        height: '$button-size',
        radius: {
            '': 0,
            ':last-child': '$last-button-radius',
            ':first-child': '$first-button-radius',
            ':first-child & :last-child': '$first-and-last-button-radius',
        },
    },
});
const CopyButton = tasty(ActionButton, {
    icon: _jsx(CopyIcon, {}),
    'aria-label': 'Copy to clipboard',
});
const ShowButton = tasty(ActionButton, {
    'aria-label': 'Show hidden parts',
});
// const HIDDEN_SYMBOL = '●';
const HIDDEN_SYMBOL = '•';
function replaceSymbolsToHidden(str) {
    return HIDDEN_SYMBOL.repeat(str.length);
}
function CopySnippet(allProps) {
    const { code = '', title = 'Code example', nowrap, prefix = '', language, serif, actions, showTooltip = false, hideText, ...props } = allProps;
    const { toast } = useToastsApi();
    const [showHidden, setShowHidden] = useState(false);
    async function onCopy() {
        await copy(code);
        toast.success(`${title} copied`);
    }
    const pristineCode = code.replace(/\n$/, '');
    const multiline = pristineCode.includes('\n') && !nowrap;
    let formattedCode = pristineCode
        .replace(/\r/g, '')
        .split(/\n/g)
        .map((line) => `${prefix}${line}`)
        .join('\n')
        .trim();
    if (!showHidden) {
        if (hideText === true) {
            formattedCode = replaceSymbolsToHidden(formattedCode);
        }
        else if (typeof hideText === 'string') {
            formattedCode = formattedCode.replaceAll(hideText, replaceSymbolsToHidden(hideText));
        }
        else if (Array.isArray(hideText)) {
            hideText.forEach((text) => {
                formattedCode = formattedCode.replaceAll(text, replaceSymbolsToHidden(text));
            });
        }
    }
    const mods = useMemo(() => {
        return {
            nowrap,
            multiline,
            serif,
            hidden: !!hideText,
        };
    }, [nowrap, multiline, hideText, serif]);
    const Snippet = (_jsx(CopySnippetElement, { mods: mods, ...props, children: _jsxs("div", { "data-element": "Grid", children: [_jsx(StyledBlock, { mods: mods, children: _jsx(PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }) }), _jsxs(ButtonContainer, { mods: mods, children: [_jsx(CopyButton, { "aria-label": `Copy ${title}`, onPress: onCopy }), hideText && (_jsx(ShowButton, { icon: showHidden ? _jsx(EyeInvisibleIcon, {}) : _jsx(EyeIcon, {}), onPress: () => setShowHidden(!showHidden) })), actions] })] }) }));
    if (showTooltip) {
        return (_jsxs(TooltipTrigger, { children: [_jsx(ActionElement, { children: Snippet }), _jsx(Tooltip, { children: formattedCode })] }));
    }
    return Snippet;
}
const _CopySnippet = Object.assign(CopySnippet, {
    Button: ActionButton,
});
_CopySnippet.displayName = 'CopySnippet';
export { _CopySnippet as CopySnippet };

        