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

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import copy from 'clipboard-copy';
import { forwardRef, useState } from 'react';
import { useClipboard } from 'react-aria';
import { useTimer } from '../../../_internal/index.js';
import { CopyIcon } from '../../../icons/index.js';
import { extractStyles, POSITION_STYLES, tasty, } from '../../../tasty/index.js';
import { Button } from '../../actions/index.js';
import { useToastsApi } from '../../overlays/Toasts/index.js';
import { Card } from '../Card/Card.js';
const StyledBlock = tasty({
    styles: {
        display: 'grid',
        flow: 'column',
        placeContent: 'center space-between',
        placeItems: 'center stretch',
        gap: '1x',
        position: 'relative',
        width: 'max 100%',
        color: 'inherit',
        padding: '0 1.5x',
        // height: {
        //   '': '4.5x',
        //   '[data-size="small"]': '3.5x',
        //   '[data-size="large"]': '5.5x',
        // },
        userSelect: 'none',
        Label: {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
        },
    },
});
const CopyPasteBlockElement = tasty(Card, {
    qa: 'CopyPasteBlock',
    styles: {
        display: 'grid',
        fill: '#dark-bg',
        radius: '1r',
        padding: {
            '': '0 1px',
            ':focus': '0',
        },
        color: {
            '': '#dark',
            error: '#danger-text',
        },
        border: {
            '': 'dashed #dark-03',
            ':focus': '2px dashed #purple-text',
            error: 'dashed #danger',
        },
        cursor: '$pointer',
        preset: {
            '': 't3',
            'size=large': 't2',
        },
        height: {
            '': '5x',
            'size=small': '4x',
            'size=large': '6x',
        },
        boxSizing: 'border-box',
        Grid: {
            display: 'grid',
            flow: 'row',
            gridColumns: 'minmax(0, 1fr) min-content',
            placeContent: 'stretch',
            width: 'min 20x',
            radius: '1r',
            position: 'relative',
        },
        Shortcut: {
            display: {
                '': 'none',
                ':focus & !error': 'inline',
            },
        },
    },
});
const CopyButton = tasty(Button, {
    type: 'clear',
    icon: _jsx(CopyIcon, {}),
    'aria-label': 'Copy to clipboard',
    styles: {
        placeSelf: 'stretch',
        border: '#clear',
        shadow: {
            '': '0 0 0 1ow #purple-03.0 inset',
            focused: '0 0 0 1ow #purple-03 inset',
        },
        radius: {
            '': '0 1r 1r 0',
            'multiline | has-scroll': '0 1r 0 0',
        },
        height: 'auto',
        outline: false,
    },
});
function CopyPasteBlock(allProps, ref) {
    const { value = '', onPaste, placeholder, title, size = 'medium', ...props } = allProps;
    const styles = extractStyles(props, POSITION_STYLES);
    const [error, setError] = useState(null);
    const { clipboardProps } = useClipboard({
        async onPaste(items) {
            let pasted = await Promise.all(items
                .filter((item) => item.kind === 'text' && item.types.has('text/plain'))
                .map((item) => item.getText('text/plain')));
            try {
                await onPaste?.(pasted.join('\n'));
            }
            catch (e) {
                setError(String(e));
            }
        },
        getItems() {
            return value
                ? [
                    {
                        'text/plain': value,
                    },
                ]
                : [];
        },
        onCopy() {
            if (value) {
                toast.success(`${title || 'Text'} copied`);
            }
        },
    });
    useTimer({
        delay: 1000,
        callback() {
            setError(null);
        },
        isDisabled: !error,
    });
    const { toast } = useToastsApi();
    async function onCopy() {
        await copy(value);
        toast.success(`${title || 'Text'} copied`);
    }
    const pristineValue = value.replace(/\n/, ' ');
    return (_jsx(CopyPasteBlockElement, { ref: ref, mods: { error: !!error }, "data-size": size, styles: styles, tabIndex: "0", ...props, ...clipboardProps, children: _jsxs("div", { "data-element": "Grid", children: [_jsxs(StyledBlock, { "data-size": size, mods: {
                        placeholder: !!placeholder || !value,
                    }, children: [_jsx("div", { "data-element": "Label", children: error != null ? (error || 'Invalid data') : value ? (pristineValue) : (_jsx(_Fragment, { children: placeholder ? placeholder : 'Select and paste' })) }), _jsxs("span", { "data-element": "Shortcut", children: [_jsx("kbd", { children: "Cmd" }), " + ", _jsx("kbd", { children: "V" })] })] }), value && !error && (_jsx(CopyButton, { size: size, "aria-label": `Copy ${title}`, onPress: onCopy }))] }) }));
}
const _CopyPasteBlock = forwardRef(CopyPasteBlock);
_CopyPasteBlock.displayName = 'CopyPasteBlock';
export { _CopyPasteBlock as CopyPasteBlock };

        