import { LitElement, html, css, unsafeCSS, PropertyValues } from "lit";
import { template } from "./template";
import { property, state } from "lit/decorators.js";
import { IRegion, region } from "@uxland/regions";
import { PrimariaRegionHost, shellApi } from "../../../api/api";
import styles from "./styles.css?inline";

export class CommunicationActionMenu extends PrimariaRegionHost(LitElement) {
  constructor(icon: string, label: string) {
    super();
    this.icon = icon;
    this.label = label;
  }

  @state() showText = false;

  @region({ targetId: "communication-sidenav-region-container", name: shellApi.regionManager.regions.shell.communicationSidenav })
  comminucationSidenavRegion: IRegion | undefined;

  static styles = css`
    ${unsafeCSS(styles)}
  `;

  firstUpdated(_changedProps: PropertyValues<CommunicationActionMenu>) {
    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.showText = width > 100;
      }
    });

    observer.observe(parentElement as HTMLElement);
  }

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

  @property({ type: String }) icon = "";
  @property({ type: String }) label = "";
}