import { LitElement, css, html, unsafeCSS } from "lit";
import { property, state } from "lit/decorators.js";
import { PrimariaNavItemConfig, PrimariaNavTreeMenuConfig } from "../typings";
import styles from "./styles.css?inline";
import { template } from "./template";

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

  @property({ type: Object }) config: PrimariaNavTreeMenuConfig;

  @state() showActionMenu = false;

  constructor(config: PrimariaNavTreeMenuConfig) {
    super();
    this.config = config;
  }

  get primariaNavItemConfig(): PrimariaNavItemConfig {
    return {
      icon: this.config.icon,
      label: this.config.label,
      showArrow: true,
      callbackFn: this.handleItemClick,
    };
  }

  handleItemClick = () => {
    this.showActionMenu = true;
  };

  handleCloseMenu = () => {
    this.showActionMenu = false;
  };

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