import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

@customElement('umb-preview-open-website')
export class UmbPreviewOpenWebsiteElement extends UmbLitElement {
	async #onClick() {
		const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
		await previewContext?.openWebsite();
	}

	override render() {
		return html`
			<uui-button look="primary" @click=${this.#onClick}>
				<div>
					<uui-icon name="icon-out"></uui-icon>
					<span>${this.localize.term('preview_openWebsiteLabel')}</span>
				</div>
			</uui-button>
		`;
	}

	static override styles = [
		css`
			:host {
				display: flex;
				border-left: 1px solid var(--uui-color-header-contrast);
				--uui-button-font-weight: 400;
				--uui-button-padding-left-factor: 3;
				--uui-button-padding-right-factor: 3;
			}

			uui-button > div {
				display: flex;
				align-items: center;
				gap: var(--uui-size-2, 6px);
			}
		`,
	];
}

export { UmbPreviewOpenWebsiteElement as element };

declare global {
	interface HTMLElementTagNameMap {
		'umb-preview-open-website': UmbPreviewOpenWebsiteElement;
	}
}
