import { html, LitElement, css } from "lit";
import {
  customElement,
  property,
  queryAssignedNodes,
  query,
} from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
const tagName = "sonic-divider";
@customElement(tagName)
export class Divider extends LitElement {
  static styles = [
    css`
      :host { 
        --sc-divider-my: 0.5rem;
        --sc-divider-mx: 0;
        --sc-divider-border-width: max(
          1px,
          var(--sc-border-width, max(1px, 0.12rem))
        );
        --sc-divider-border-color: var(--sc-border-color);
        --sc-divider-border-style: solid;
        --sc-divider-color: currentColor;
        --sc-divider-ff: var(--sc-font-family-base, sans-serif);
        --sc-divider-fs: 1rem;
        --sc-divider-fw: var(--sc-font-weight-base, 400);
        --sc-divider-fst: var(--sc-font-style-base, normal);

        margin: var(--sc-divider-my) var(--sc-divider-mx);
        font-size: var(--sc-divider-fs);
        font-style: var(--sc-divider-fst);
        font-family: var(--sc-divider-ff);
        font-weight: var(--sc-divider-fw);
        color: var(--sc-divider-color);
        display: block;
      }

      /*SIZE*/
      :host([size="2xs"]) {
        --sc-divider-my: 0.35rem;
        --sc-divider-fs: 0.68rem;
      }

      :host([size="xs"]) {
        --sc-divider-my: 0.5rem;
        --sc-divider-fs: 0.75rem;
      }

      :host([size="sm"]) {
        --sc-divider-my: 0.75rem;
        --sc-divider-fs: 0.875rem;
      }

      :host([size="md"]) {
        --sc-divider-my: 1.25rem;
      }

      :host([size="lg"]) {
        --sc-divider-my: 1.85rem;
      }

      :host([size="xl"]) {
        --sc-divider-my: 2.25rem;
      }

      :host([size="2xl"]) {
        --sc-divider-my: 3.35rem;
      }

      div {
        display: flex;
        align-items: center;
        width: 100%;
      }

      div::before,
      div::after {
        content: "";
        flex-grow: 1;
        border-top: var(--sc-divider-border-width)
          var(--sc-divider-border-style) var(--sc-divider-border-color);
        width: 100%;
        opacity: var(--sc-divider-opacity, 1);
      }

      /*ALIGNEMENT*/
      :host([align="left"]) div:before {
        display: none;
      }

      :host([align="right"]) div:after {
        display: none;
      }

      :host([vertical]) {
        margin: var(--sc-divider-mx) var(--sc-divider-my);
      }

      :host([vertical]) div {
        flex-direction: column;
        height: 100%;
        min-height: var(--sc-form-height, 2.5em);
      }

      :host([vertical]) .has-text {
        gap: 0.25rem;
      }

      :host([vertical]) div::before,
      :host([vertical]) div::after {
        border-top: none;
        border-left: var(--sc-divider-border-width)
          var(--sc-divider-border-style) var(--sc-divider-border-color);
        width: auto;
        height: 100%;
        opacity: var(--sc-divider-opacity, 1);
      }

      :host([noMargin]) {
        margin: 0;
      }

      /*TEXT*/
      .text {
        flex-shrink: 0;
        line-height: 1.1;
        max-width: 80%;
      }

      .no-text .text {
        display: none;
      }

      .has-text {
        gap: 0.5rem;
      }

      :host([dotted]) {
        --sc-divider-border-style: dotted;
      }
      :host([dashed]) {
        --sc-divider-border-style: dashed;
      }
    `,
  ];
  @queryAssignedNodes({ flatten: true })
  slotNodes!: Array<Node>;

  @query("div")
  divider!: HTMLDivElement;

  @property({ type: String }) label = "";
  @property({ type: String, reflect: true }) size?:
    | "2xs"
    | "xs"
    | "sm"
    | "md"
    | "lg"
    | "xl"
    | "2xl";
  @property({ type: String, reflect: true }) align:
    | "left"
    | "right"
    | "center" = "center";
  @property({ type: Boolean, reflect: true }) vertical = false;
  @property({ type: Boolean, reflect: true }) noMargin = false;
  @property({ type: Boolean, reflect: true }) dashed = false;
  @property({ type: Boolean, reflect: true }) dotted = false;

  firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
    super.firstUpdated(changedProperties);
    if (this.label || this.slotNodes?.length) {
      this.divider?.classList.add("has-text");
    }
  }

  render() {
    return html`<div part="divider">
      <span class="text"
        >${unsafeHTML(this.label ? this.label : "")}<slot></slot
      ></span>
    </div>`;
  }
}