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

import { OrbitComponent } from "@helpers";
import type { BreadcrumbPath } from "@src/tems.d.ts";

export type BreadcrumbPathExpanded = BreadcrumbPath & {
  isLastElement?: boolean;
};

export type TemsBreadcrumbProps = {
  path: BreadcrumbPathExpanded[];
};

@customElement("tems-breadcrumb")
export class TemsBreadcrumb extends OrbitComponent {
  constructor() {
    super({ setupSubscriptions: false, ignoreRouter: true });
  }

  static styles = css`
    :host {
      user-select: none;
      display: flex;
      align-items: center;
    }
  `;

  @property({ attribute: false })
  path: TemsBreadcrumbProps["path"] = [];

  render() {
    return html`${this.path.map((element, index) => {
      element.isLastElement = index === this.path.length - 1;

      return html`
        <tems-breadcrumb-item
          .icon=${element.icon || nothing}
          label=${element.label}
          active=${element.isLastElement || nothing}
          disabled=${!element.route || nothing}
          @click=${this.route ? this._navigate : nothing}
          navigation-target=${element.route || nothing}
          navigation-resource=${element.resource || nothing}
        ></tems-breadcrumb-item>
        ${
          !element.isLastElement
            ? html`<tems-breadcrumb-divider></tems-breadcrumb-divider>`
            : nothing
        }
      `;
    })}`;
  }
}