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 { css, customElement, html, state } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
let UmbTiptapTableInsertElement = class UmbTiptapTableInsertElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this._selectedColumn = 0;
        this._selectedRow = 0;
    }
    #onClick(column, row) {
        this._selectedColumn = column;
        this._selectedRow = row;
        this.editor?.chain().focus().insertTable({ rows: row, cols: column, withHeaderRow: false }).run();
    }
    #onMouseover(column, row) {
        this._selectedColumn = column;
        this._selectedRow = row;
    }
    render() {
        const rows = 10;
        const columns = 10;
        const cells = [];
        for (let i = 1; i <= rows; i++) {
            const row = [];
            for (let j = 1; j <= columns; j++) {
                row.push(html `
					<button
						type="button"
						class=${i <= this._selectedRow && j <= this._selectedColumn ? 'selected' : ''}
						aria-label="${j} columns, ${i} rows"
						@mouseover=${() => this.#onMouseover(j, i)}
						@click=${() => this.#onClick(j, i)}></button>
				`);
            }
            cells.push(row);
        }
        return html `
			<div id="grid">${cells}</div>
			<label>${this._selectedColumn} &times; ${this._selectedRow}</label>
		`;
    }
    static { this.styles = [
        css `
			:host {
				background-color: var(--uui-color-surface);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 170px;
			}

			#grid {
				display: flex;
				flex-wrap: wrap;

				> button {
					all: unset;
					box-sizing: border-box;

					border-color: var(--uui-color-border);
					border-style: solid;
					border-width: 0 1px 1px 0;

					height: 17px;
					width: 17px;

					&:hover,
					&.selected {
						background-color: var(--uui-color-background);
						border-color: var(--uui-color-selected);
					}
				}
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbTiptapTableInsertElement.prototype, "_selectedColumn", void 0);
__decorate([
    state()
], UmbTiptapTableInsertElement.prototype, "_selectedRow", void 0);
UmbTiptapTableInsertElement = __decorate([
    customElement('umb-tiptap-table-insert')
], UmbTiptapTableInsertElement);
export { UmbTiptapTableInsertElement };
export default UmbTiptapTableInsertElement;
