import {classMap} from "lit/directives/class-map.js";
import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
import {property} from 'lit/decorators.js';
import ZincElement from '../../internal/zinc-element';
import ZnIcon from "../icon";
import ZnTooltip from "../tooltip";

import styles from './item.scss';

/**
 * @summary Used for listing items in a description list. Caption on the right, content on the left.
 * @documentation https://zinc.style/components/item
 * @status experimental
 * @since 1.0
 *
 * @dependency zn-icon
 * @dependency zn-tooltip
 *
 * @slot - The default slot. Can either be slotted or use the value attribute
 * @slot actions - Used for adding actions to a zn-item.
 *
 * @csspart base - The items base wrapper
 * @csspart caption - The items caption
 * @csspart icon - The items icon
 */
export default class ZnItem extends ZincElement {
  static dependencies = {
    'zn-icon': ZnIcon,
    'zn-tooltip': ZnTooltip
  };

  static styles: CSSResultGroup = unsafeCSS(styles);

  @property() caption: string;

  @property() description: string;

  @property({type: Boolean}) stacked: boolean;

  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';

  @property({attribute: 'edit-on-hover', type: Boolean}) editOnHover: boolean;

  @property({attribute: 'help-tooltip'}) helpTooltip: string;

  @property() icon: string;

  @property() value: string;

  @property({type: Boolean}) inline: boolean;

  @property({type: Boolean}) grid: boolean;

  @property({type: Boolean, attribute: 'no-padding'}) noPadding: boolean;

  // align items to the right
  @property({type: Boolean, attribute: 'align-end'}) alignEnd: boolean;

  // align items in the center
  @property({type: Boolean, attribute: 'align-center'}) alignCenter: boolean;

  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('role', 'listitem');
  }

  protected updated(_changedProperties: PropertyValues) {
    super.updated(_changedProperties);

    const inlineEdit = this.querySelector('zn-inline-edit');
    if (inlineEdit) {
      inlineEdit.setAttribute('size', this.size);
    }
    this.shadowRoot?.querySelector('.item')?.classList.toggle('item--with-content', this._hasContent());
  }

  protected _hasContent(): boolean {
    const slotContent = this.querySelectorAll(":scope > :not([slot])")?.length || 0;
    return slotContent > 0 || this.innerText.length > 0 || !(this.value === undefined || this.value === null)
  }

  protected _hasRequiredSlot(): boolean {
    const slotElements = this.querySelectorAll(":scope > *:not([slot])");
    return Array.from(slotElements).some(el => el.hasAttribute && el.hasAttribute('required'));
  }

  render() {
    const hasIcon = this.icon && this.icon.length > 0;

    const hasHelpTooltip = this.helpTooltip?.length > 0;

    const headings = html`
      <div class="item__headings">
        <div class=${classMap({
          'item__caption': true,
          'item__caption--required': this._hasRequiredSlot(),
          'item__caption--has-help': hasHelpTooltip
        })} part="caption">${this.caption}
          ${hasHelpTooltip ? html`
            <zn-tooltip class="item__help-tooltip" content="${this.helpTooltip}">
              <zn-icon src="info"></zn-icon>
            </zn-tooltip>` : ''}
        </div>
        ${this.description ? html`
          <div class="item__description">${this.description}</div>` : ''}
      </div>`;

    return html`
      <div
        class="${classMap({
          'item': true,
          'item--with-content': this._hasContent(),
          'item--stacked': this.stacked,
          'item--edit-on-hover': this.editOnHover,
          'item--inline': this.inline,
          'item--grid': this.grid,
          'item--small': this.size === 'small',
          'item--medium': this.size === 'medium',
          'item--large': this.size === 'large',
          'item--has-icon': hasIcon,
          'item--no-padding': this.noPadding,
          'item--align-end': this.alignEnd,
          'item--align-center': this.alignCenter
        })}"
        part="base">

        ${this.icon ? html`
          <div class="item__header">
            <div class="item__icon">
              <zn-icon src="${this.icon}" size="20" part="icon"></zn-icon>
            </div>
            ${headings}
          </div>` : headings}

        <div class="item__content">
          <div class="item__content-inner">
            <slot>${this.value}</slot>
          </div>
          <div class="item__action-wrapper">
            <slot name="actions" class="item__actions"></slot>
          </div>
        </div>
      </div>
    `;
  }
}