import { regionView } from "@uxland/regions";
import { LitElement, PropertyValues, css, html, unsafeCSS } from "lit";
import { state } from "lit/decorators.js";
import styles from "./styles.css?inline";
import { template } from "./template";

export class NavDivider extends regionView(LitElement) {
  static styles = css`
    ${unsafeCSS(styles)}
  `;

  render() {
    return html`${template(this)}`;
  }

  @state()
  expanded = false;

  connectedCallback(): void {
    super.connectedCallback();
  }

  firstUpdated(_changedProps: PropertyValues<NavDivider>) {
    super.firstUpdated(_changedProps);
    this.observeHostResize();
  }

  observeHostResize() {
    const parentElement = this.parentElement;
    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const width = entry.target.clientWidth;
        this.expanded = width > 100;
      }
    });

    observer.observe(parentElement as HTMLElement);
  }
}

customElements.define("primaria-nav-divider", NavDivider);