/**
 * 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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
import { customElement, property} from 'lit/decorators.js';
import {styles} from './nile-option-group.css';
import NileElement from '../internal/nile-element';
import { OptionGroupData } from './nile-option-group.interface';

@customElement('nile-option-group')
export class NileOptionGroup extends NileElement {

	public static get styles(): CSSResultArray {
		return [styles];
	}

	@property({type: String, reflect: true, attribute: true}) name: string = "";
	@property({ type: Object, reflect: true, attribute: true}) data: OptionGroupData | null = null;
	@property({ type: Boolean, reflect: true, attribute: true}) sticky = false;

	private checkForImageOrIcon() {
		return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;
	}

	private normalizeImageDimension(value?: string | number): string {
		if (value === undefined || value === null || value === "") {
			return "20";
		}
		
		const dimension = Number(value);
		if (isNaN(dimension) || dimension <= 0) {
			return "20";
		}	
		return dimension > 40 ? "25" : dimension.toString();
	}	

	public render(): TemplateResult {
		return html`
			<div part="option-group-header" class="option-group-header">
				<div part="content-container" class="content-container ${this.checkForImageOrIcon() ? 'gap-18px' : ''}">
					<!-- prefix content -->
					${
						this.data?.prefix?.icon?.name
						? html`<nile-icon part="prefix-icon" name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size || "16"}" color="${this.data?.prefix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.prefix?.icon?.method || "fill"}"></nile-icon>`
						: this.data?.prefix?.prefixText
							? html`<span part="prefix-text">${this.data?.prefix?.prefixText}</span>`
							: this.data?.prefix?.image?.src
								? html`<img part="prefix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.prefix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.prefix?.image?.height)}">`
								: html`<slot part="prefix" name="prefix" class="option-group-prefix"></slot>`
					}

					<!-- main content -->
					${
						this.data?.textContent
						? html`<span part="content-text">${this.data?.textContent}</span>`
						: html`<slot part="content"></slot>`
					}
				</div>

				<!-- suffix content -->
				${
					this.data?.suffix?.icon?.name
					? html`<nile-icon part="suffix-icon" name="${this.data?.suffix?.icon?.name}" size="${this.data?.suffix?.icon?.size || "16"}" color="${this.data?.suffix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.suffix?.icon?.method || "fill"}"></nile-icon>`
					: this.data?.suffix?.suffixText
						? html`<span part="suffix-text">${this.data?.suffix?.suffixText}</span>`
						: this.data?.suffix?.image?.src
							? html`<img part="suffix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.suffix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.suffix?.image?.height)}">`
							: html`<slot part="suffix" name="suffix" class="option-group-suffix"></slot>`
				}
			</div>
			`;
	}
}

export default NileOptionGroup;

declare global {
  interface HTMLElementTagNameMap {
    'nile-option-group': NileOptionGroup;
  }
}