import { html, LitElement, css, PropertyValues } from "lit";
import { styleMap } from "lit/directives/style-map.js";
import {
  customElement,
  property,
  state,
  queryAssignedNodes,
} from "lit/decorators.js";
import {
  label,
  description,
} from "@supersoniks/concorde/core/components/ui/form/css/form-control";
import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
import { unsafeHTML } from "lit/directives/unsafe-html.js";

const tagName = "sonic-group";

@customElement(tagName)
export class Group extends LitElement {
  @property({ type: String }) alignItems = "center";
  @property({ type: String }) label?: string;
  @property({ type: String }) description?: string;
  @queryAssignedNodes({ slot: "label", flatten: true })
  slotLabelNodes!: Array<Node>;

  @queryAssignedNodes({ slot: "description", flatten: true })
  slotDescriptionNodes!: Array<Node>;

  @state() hasDescription = false;
  @state() hasLabel = false;

  static styles = [
    fontSize,
    label,
    description,
    css`
      :host {
        display: inline-block;
        vertical-align: middle;
      }

      .main-slot {
        width: 100%;
        display: flex;
        min-width: 0;
      }
      .hidden {
        display: none;
      }

      ::slotted(sonic-button),
      ::slotted(sonic-input),
      ::slotted(sonic-select) {
        flex-grow: 1;
      }
    `,
  ];

  updated(): void {
    const children = this.querySelectorAll(
      "sonic-input, sonic-button, sonic-select"
    );
    const nbChildren = children.length;

    if (nbChildren > 1) {
      children.forEach((item: Element, index: number) => {
        const htmlElement = item as HTMLElement;
        if (index === 0) {
          htmlElement.style.setProperty("--sc-item-rounded-tr", "0");
          htmlElement.style.setProperty("--sc-item-rounded-br", "0");
        } else if (index === nbChildren - 1) {
          htmlElement.style.setProperty("--sc-item-rounded-tl", "0");
          htmlElement.style.setProperty("--sc-item-rounded-bl", "0");
        } else {
          htmlElement.style.setProperty("--sc-item-rounded-tr", "0");
          htmlElement.style.setProperty("--sc-item-rounded-br", "0");
          htmlElement.style.setProperty("--sc-item-rounded-tl", "0");
          htmlElement.style.setProperty("--sc-item-rounded-bl", "0");
        }
      });
    }
  }

  connectedCallback() {
    super.connectedCallback();
    this.hasSlotOrProps();
  }

  willUpdate(changedProperties: PropertyValues) {
    this.hasSlotOrProps();
    super.willUpdate(changedProperties);
  }

  hasSlotOrProps() {
    this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
    this.hasDescription =
      this.description || this.slotDescriptionNodes?.length ? true : false;
  }

  render() {
    const slotStyle = {
      alignItems: this.alignItems,
    };

    return html`<span class="${this.hasLabel ? "form-label" : "hidden"}"
        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
          name="label"
          @slotchange=${this.hasSlotOrProps}
        ></slot
      ></span>
      <slot class="main-slot" style=${styleMap(slotStyle)}></slot>
      <slot
        name="description"
        @slotchange=${this.hasSlotOrProps}
        class="${this.hasDescription ? "form-description" : "hidden"}"
      >
        ${this.description ? html`${unsafeHTML(this.description)}` : ""}
      </slot>`;
  }
}