// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=22-434&m=dev
import {
  LitElement,
  type TemplateResult,
  css,
  html,
  nothing,
  unsafeCSS,
} from "lit";
import { customElement, property } from "lit/decorators.js";

import TemsSidebarStyle from "@styles/navbar/ui/tems-sidebar-item.scss?inline";

export type TemsSidebarItemProps = {
  sublevel?: boolean;
  label: string;
  icon?: TemplateResult;
  active: boolean;
  disabled: boolean;
};

@customElement("tems-sidebar-item")
export class TemsSidebarItem extends LitElement {
  static styles = css`
    ${unsafeCSS(TemsSidebarStyle)}
  `;

  @property({ attribute: false, type: HTMLTemplateElement, reflect: true })
  icon: TemsSidebarItemProps["icon"];

  @property({ attribute: "sublevel", type: Boolean, reflect: true })
  sublevel: TemsSidebarItemProps["sublevel"] = false;

  @property({ attribute: "label", type: String, reflect: true })
  label: TemsSidebarItemProps["label"] = "Label";

  @property({ attribute: "active", type: Boolean, reflect: true })
  active: TemsSidebarItemProps["active"] = false;

  @property({ attribute: "disabled", type: Boolean, reflect: true })
  disabled: TemsSidebarItemProps["disabled"] = false;

  render() {
    return html`<div
      class="${this.sublevel ? "level-2" : "level-1"}"
      active=${this.active || nothing}
      disabled=${this.disabled || nothing}
    >
      ${this.sublevel ? html`<p class="divider"></p>` : nothing}
      ${this.icon ? html`${this.icon}` : nothing} ${this.label}
    </div> `;
  }
}