/**
 * Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { html, CSSResultArray, TemplateResult} from 'lit';
import { customElement, property, state, query} from 'lit/decorators.js';
import {styles} from './nile-inline-sidebar-item-body.css';
import NileElement from '../internal/nile-element';


/**
 * Nile inline-sidebar-item-body component.
 *
 * @tag nile-inline-sidebar-item-body
 *
 */
@customElement('nile-inline-sidebar-item-body')
export class NileInlineSidebarItemBody extends NileElement {

	/** Maximum number of visible lines before text is truncated with an ellipsis. */
	@property({ type: Number, reflect: true }) lines: number = 2;

	@property({ type: String, reflect: true }) content: string = '';

	@property({ type: Boolean, reflect: true }) showTooltip: boolean = false;

	@state() private isTruncated = false;

	@query('.body-content') private bodyContentEl!: HTMLElement;

	@property({ type: Boolean, reflect: true, attribute: true }) disabled: boolean = false;
	@property({ type: Boolean, reflect: true, attribute: true }) active: boolean = false;

	private resizeObserver?: ResizeObserver;

	/**
	 * The styles for nile-inline-sidebar-item-body
	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
	 */
	public static get styles(): CSSResultArray {
		return [styles];
	}

	/* #endregion */

	/* #region Methods */

	firstUpdated() {
		this.checkTruncation();
		if (this.bodyContentEl) {
			this.resizeObserver = new ResizeObserver(() => this.checkTruncation());
			this.resizeObserver.observe(this.bodyContentEl);
		}
	}

	disconnectedCallback() {
		super.disconnectedCallback();
		this.resizeObserver?.disconnect();
	}

	private checkTruncation() {
		if (this.bodyContentEl) {
			const truncated = this.bodyContentEl.scrollHeight > this.bodyContentEl.clientHeight;
			if (truncated !== this.isTruncated) {
				this.isTruncated = truncated;
			}
		}
	}

	private get contentTemplate(): TemplateResult {
		const body = html`<div class="body-text" part="body-text">${this.content}</div>`;

		return this.isTruncated && this.showTooltip
			? html`<nile-lite-tooltip content=${this.content} hoist>${body}</nile-lite-tooltip>`
			: body;
	}

	/**
	 * Render method
	 * @slot This is a slot test
	 */
	public render(): TemplateResult {
		return html`
		<div class="item-body" part="item-body">
		<div class="prefix-content" part="prefix-content">
			<slot name="prefix"></slot>
		</div>
		<div class="body-content" part="body-content" style="--line-clamp: ${this.lines? this.lines : 2}">
			${this.content ? this.contentTemplate : html`<div class="body-text" part="body-text"><slot></slot></div>`}
		</div>
		<div class="suffix-content" part="suffix-content">
			<slot name="suffix"></slot>
		</div>
		</div>
			`;
	}

	/* #endregion */
}

export default NileInlineSidebarItemBody;

declare global {
  interface HTMLElementTagNameMap {
    'nile-inline-sidebar-item-body': NileInlineSidebarItemBody;
  }
}