var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbTextStyles } from '../../style/index.js';
import { css, customElement, html, property, state, when, LitElement } from '../../../../external/lit/index.js';
//TODO consider adding a highlight prop to the code block, that could spin up/access monaco instance and highlight the code
/**
 *  A simple styled box for showing code-based error messages or blocks od code.
 *  @slot - the default slot where the full message resides
 */
let UmbCodeBlockElement = class UmbCodeBlockElement extends LitElement {
    constructor() {
        super(...arguments);
        this.language = '';
        this.copy = false;
        this._copyState = 'idle';
    }
    async copyCode() {
        const text = this.textContent;
        if (text) {
            await navigator.clipboard.writeText(text);
            this._copyState = 'success';
            setTimeout(() => {
                this._copyState = 'idle';
            }, 2000);
        }
    }
    render() {
        return html `
			${this.#renderHeader()}
			<pre><uui-scroll-container><code><slot></slot></code></uui-scroll-container></pre>
		`; // Avoid breaks between elements of <pre></pre>
    }
    #renderHeader() {
        if (!this.language && !this.copy)
            return;
        return html `
			<div id="header">
				<span id="lang">${this.language}</span>
				${when(this.copy, () => html `
						<uui-button color=${this._copyState === 'idle' ? 'default' : 'positive'} @click=${this.copyCode}>
							${when(this._copyState === 'idle', () => html `<uui-icon name="copy"></uui-icon> <umb-localize key="general_copy">Copy</umb-localize>`, () => html `<uui-icon name="check"></uui-icon> <umb-localize key="general_copied">Copied!</umb-localize>`)}
						</uui-button>
					`)}
			</div>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: block;
				border: 1px solid var(--uui-color-divider-emphasis);
				border-radius: var(--uui-border-radius);
			}

			uui-scroll-container {
				overflow-y: auto;
				overflow-wrap: anywhere;
			}

			pre {
				font-family: monospace;
				background-color: var(--uui-color-surface-alt);
				color: #303033;
				display: block;
				margin: 0;
				overflow-x: auto;
				padding: 9.5px;
			}

			pre,
			code {
				word-wrap: normal;
				white-space: pre;
				color: var(--uui-color-text);
			}

			#header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: var(--uui-color-surface-alt);
				border-bottom: 1px solid var(--uui-color-divider-emphasis);
			}

			#lang {
				margin-left: 16px;
				font-weight: bold;
			}

			button {
				font-family: inherit;
				padding: 6px 16px;
				background-color: transparent;
				border: none;
				border-left: 1px solid var(--uui-color-divider-emphasis);
				border-radius: 0;
				color: #000;
				display: flex;
				align-items: center;
				gap: 8px;
			}

			button:hover {
				background-color: var(--uui-color-surface-emphasis);
			}
		`,
    ]; }
};
__decorate([
    property()
], UmbCodeBlockElement.prototype, "language", void 0);
__decorate([
    property({ type: Boolean })
], UmbCodeBlockElement.prototype, "copy", void 0);
__decorate([
    state()
], UmbCodeBlockElement.prototype, "_copyState", void 0);
UmbCodeBlockElement = __decorate([
    customElement('umb-code-block')
], UmbCodeBlockElement);
export { UmbCodeBlockElement };
