import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { css, html, nothing, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';

@customElement('umb-language-root-table-delete-column-layout')
export class UmbLanguageRootTableDeleteColumnLayoutElement extends UmbLitElement {
	@property({ attribute: false })
	value!: LanguageResponseModel;

	@state()
	_isOpen = false;

	#onActionExecuted() {
		this._isOpen = false;
	}

	#onClick() {
		this._isOpen = !this._isOpen;
	}

	#onClose() {
		this._isOpen = false;
	}

	render() {
		// TODO: we need to use conditionals on each action here. But until we have that in place
		// we'll just remove all actions on the default language.
		if (this.value.isDefault) return nothing;

		return html`
			<umb-dropdown .open="${this._isOpen}" @close=${this.#onClose}>
				<uui-button label="actions" slot="trigger" compact @click=${this.#onClick}>
					<uui-symbol-more></uui-symbol-more>
				</uui-button>
				<umb-entity-action-list
					slot="dropdown"
					@executed=${this.#onActionExecuted}
					entity-type="language"
					unique=${ifDefined(this.value.isoCode)}></umb-entity-action-list>
			</umb-dropdown>
		`;
	}

	static styles = [UmbTextStyles, css``];
}

declare global {
	interface HTMLElementTagNameMap {
		'umb-language-root-table-delete-column-layout': UmbLanguageRootTableDeleteColumnLayoutElement;
	}
}
