import { localized, msg } from "@lit/localize";
// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=23-15832&m=dev
import { LitElement, css, html, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";

import type { BreadcrumbPathExpanded } from "@src/components/header/breadcrumbs/tems-breadcrumb.ts";

import HeaderStyle from "@styles/header/tems-header.scss?inline";

import "~icons/mynaui/chevron-left";

export type TemsHeaderProps = {
  backButton?: boolean;
  heading?: string;
  breadcrumb?: BreadcrumbPathExpanded[];
};

@customElement("tems-header")
@localized()
export class TemsHeader extends LitElement {
  static styles = css`
    ${unsafeCSS(HeaderStyle)}
  `;

  @property({ attribute: "back-button", type: Boolean })
  backButton: TemsHeaderProps["backButton"] = false;

  @property({ attribute: "heading", type: String, reflect: true })
  heading: TemsHeaderProps["heading"];

  @property({ attribute: false, type: Object })
  breadcrumb: TemsHeaderProps["breadcrumb"];

  _handleBackClickEvent(e: Event) {
    e.preventDefault();
    this.dispatchEvent(new CustomEvent("backlink"));
  }

  render() {
    const backIcon = html`<icon-mynaui-chevron-left></icon-mynaui-chevron-left>`;
    return html`<div>
      ${
        this.backButton
          ? html`<tems-button
            @click=${this._handleBackClickEvent}
            type="link-color"
            label=${msg("back", { desc: "Breadcrumb button to go back" })}
            .iconLeft="${backIcon}"
          ></tems-button>`
          : nothing
      }
      ${
        this.heading
          ? html`<div class="heading">
            <tems-division label=${this.heading} type="h1"></tems-division>
          </div>`
          : nothing
      }
      ${
        this.breadcrumb
          ? html`<tems-breadcrumb .path=${this.breadcrumb}></tems-breadcrumb>`
          : nothing
      }
      <div class="cta"><slot name="cta"></slot></div>
      <div class="submenu"><slot name="submenu"></slot></div>
    </div>`;
  }
}