import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import sdk from '@stackblitz/sdk';
import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { Card } from '@workday/canvas-kit-react/card';
import { CanvasProvider, defaultBranding } from '@workday/canvas-kit-react/common';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
import { checkCircleIcon, copyIcon } from '@workday/canvas-system-icons-web';
import { base, system } from '@workday/canvas-tokens-web';
import eslintrc from './stackblitzFiles/.eslintrc.cjs.txt?raw';
import appFile from './stackblitzFiles/App.tsx?raw';
import indexHTMLFile from './stackblitzFiles/index.html?raw';
import mainFile from './stackblitzFiles/main.tsx?raw';
import { packageJSONFile } from './stackblitzFiles/packageJSONFile';
import tsconfigFile from './stackblitzFiles/tsconfig.json?raw';
import tsconfigNodeFile from './stackblitzFiles/tsconfig.node.json?raw';
import viteEnvFile from './stackblitzFiles/vite-env.d.ts?raw';
import viteConfigFile from './stackblitzFiles/vite.config.ts?raw';
const cardStencil = createStencil({
    base: {
        // Lets the block shrink inside flex/grid doc layouts so content width does not force overflow.
        minWidth: 0,
        maxWidth: '100%',
        '[data-part="example-block"]': {
            boxShadow: system.depth[1],
            borderRadius: system.shape.sm,
            padding: system.padding.md,
            position: 'relative',
            minWidth: 0,
            overflow: 'auto', // This allows for the entire ExampleCodeBlock to scroll on smaller viewports
        },
        '[data-part="example-block-container"]': {
            minWidth: 0,
            overflow: 'auto',
            padding: system.padding.md,
        },
        '[data-part="code-block"]': {
            display: 'none',
            boxShadow: system.depth[1],
            borderRadius: system.shape.sm,
        },
        '[data-part="code-toggle-stackblitz-btn-container"]': {
            position: 'absolute',
            right: calc.negate(px2rem(1)),
            bottom: calc.negate(px2rem(4)),
            display: 'flex',
            gap: system.gap.sm,
        },
        '[data-part="copy-btn"]': {
            position: 'absolute',
            bottom: '0',
            right: '0',
            borderRadius: system.shape.none,
            borderTopLeftRadius: system.shape.sm,
        },
    },
    modifiers: {
        opened: {
            true: {
                '[data-part="code-block"]': {
                    display: 'block',
                    borderTopLeftRadius: system.shape.none,
                    borderTopRightRadius: system.shape.none,
                },
                '[data-part="example-block"]': {
                    borderBottomLeftRadius: system.shape.none,
                    borderBottomRightRadius: system.shape.none,
                },
            },
        },
    },
});
export const ExampleCodeBlock = ({ code }) => {
    const [isCodeDisplayed, setCodeDisplayed] = React.useState(false);
    const textInput = React.useRef(null);
    const [copied, setCopied] = React.useState(false);
    const timer = React.useRef();
    const onCopy = () => {
        if (timer.current) {
            clearTimeout(timer.current);
        }
        timer.current = setTimeout(() => {
            setCopied(false);
        }, 2000);
        setCopied(true);
        // @ts-ignore
        navigator.clipboard.writeText(textInput.current.textContent);
    };
    /**
     * `code` returns our examples. We need to rewrite them so that they export `Demo`.
     */
    const handleExampleRewrite = (code) => {
        return code
            .replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`)
            .replace(/export default/, 'export const Demo =');
    };
    const openProjectInStackblitz = () => {
        sdk.openProject({
            files: {
                'src/Demo.tsx': handleExampleRewrite(code.__RAW__),
                'src/vite-env-d.ts': viteEnvFile,
                'src/App.tsx': appFile,
                'tsconfig.node.json': tsconfigNodeFile,
                '.eslintrc.js': eslintrc,
                'vite.config.ts': viteConfigFile,
                'src/main.tsx': mainFile,
                'index.html': indexHTMLFile,
                'tsconfig.json': tsconfigFile,
                'package.json': packageJSONFile,
            },
            template: 'node',
            title: `Demo`,
            description: `This is a Canvas Kit Demo. Edit and play around!`,
        }, 
        // Options
        {
            newWindow: true,
            openFile: 'src/Demo.tsx',
        });
    };
    return (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children: _jsx(Card.Body, { "data-part": "example-block-container", children: _jsxs(CanvasProvider, { className: defaultBranding, children: [React.createElement(code), code && (_jsxs("div", { "data-part": "code-toggle-stackblitz-btn-container", children: [_jsx(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz(), children: "\u26A1\uFE0F Edit in Stackblitz" }), _jsx(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), children: !isCodeDisplayed ? 'Show Code' : 'Hide Code' })] }))] }) }) }), _jsx(Card, { "data-part": "code-block", cs: { padding: 0 }, children: _jsx(Card.Body, { cs: { position: 'relative' }, children: _jsxs(CanvasProvider, { className: defaultBranding, children: [code && (_jsx("div", { ref: textInput, children: _jsx(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
                                        fontSize: cssVar(system.fontSize.subtext.lg),
                                        lineHeight: cssVar(system.lineHeight.subtext.lg),
                                        margin: '0',
                                        padding: `${cssVar(system.padding.xxl)} ${cssVar(base.size500)}`,
                                        boxSizing: 'border-box',
                                        maxWidth: '100%',
                                    }, children: code.__RAW__ }) })), _jsx(Tooltip, { title: copied ? 'Copied!' : 'Copy Source Code', children: _jsx(TertiaryButton, { "aria-label": "Copy Code", size: "large", "data-part": "copy-btn", variant: "inverse", iconPosition: "end", icon: copied ? checkCircleIcon : copyIcon, onClick: onCopy }) })] }) }) })] }));
};
