import React, { forwardRef } from "react";
import cls from "classnames";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { renderCodeRows } from "./utils";
import { base, Code, Content, Field, Header, Overlay, syntaxTheme, Outer, Action } from "./CodeArea.styles";
import { classes, tokens } from "./CodeArea.tokens";
import { base as sizeCSS } from "./variations/_size/base";
import { base as viewCSS } from "./variations/_view/base";
export const codeAreaRoot = (Root)=>/*#__PURE__*/ forwardRef(({ children, language = 'text', showLineNumbers = false, contentHeader, hasDivider = false, contentAction, contentOuter, style, view, size, ...rest }, ref)=>{
        const code = children ?? '';
        const lineCount = String(code).split('\n').length;
        const lineNumberWidth = `${String(lineCount).length}ch`;
        const rootStyle = {
            ...style,
            [tokens.lineNumberMinWidth]: lineNumberWidth
        };
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            style: rootStyle,
            view: view,
            size: size,
            ...rest
        }, contentOuter && /*#__PURE__*/ React.createElement(Outer, {
            className: classes.contentOuter
        }, contentOuter), /*#__PURE__*/ React.createElement(Field, null, /*#__PURE__*/ React.createElement(Overlay, null, contentHeader && /*#__PURE__*/ React.createElement(Header, {
            className: cls(classes.contentHeader, hasDivider ? classes.contentHeaderDivider : undefined)
        }, contentHeader), /*#__PURE__*/ React.createElement(Content, null, /*#__PURE__*/ React.createElement(Code, null, /*#__PURE__*/ React.createElement(SyntaxHighlighter, {
            language: language,
            renderer: renderCodeRows,
            showLineNumbers: showLineNumbers,
            showInlineLineNumbers: true,
            style: syntaxTheme,
            wrapLines: true,
            wrapLongLines: true
        }, code)), contentAction && /*#__PURE__*/ React.createElement(Action, {
            className: classes.contentAction
        }, contentAction)))));
    });
export const codeAreaConfig = {
    name: 'CodeArea',
    tag: 'div',
    layout: codeAreaRoot,
    base,
    variations: {
        size: {
            css: sizeCSS
        },
        view: {
            css: viewCSS
        }
    },
    defaults: {
        size: 'm',
        view: 'default'
    }
};
