<svelte:options
  customElement={{
    tag: 'm-page-header',
    props: {
      backbutton: { reflect: true, type: 'Boolean', attribute: 'backbutton' },
    },
  }}
/>

<script lang="ts">
  import IconButton from '../iconbutton/IconButton.svelte';
  import StatusBadge from '../statusbadge/StatusBadge.svelte';
  import { ArrowBack24, Menu24 } from '@mozaic-ds/icons-svelte';
  /**
   * The Page Header is a fundamental component that structures the top part of an interface, serving as a cognitive anchor point for users. It establishes page context, facilitates navigation, and provides the main actions available within the current scope.
   *
   * @slot content - Use this slot to insert any content below the Page Header top content.
   * @slot actions - Use this slot to insert action items in the top content.
   * @slot tabs - Use this slot to insert a tab in the header.
   * @event back {CustomEvent<void>} - Emits when the back button is clicked.
   * @event toggle-menu {CustomEvent<void>} - Emits when the burger menu button is clicked.
   */

  interface Props {
    /**
     * Main title displayed in the page header.
     */
    title: string;
    /**
     * Enables a drop shadow under the page header.
     */
    shadow?: boolean;
    /**
     * Displays a back icon button in the header.
     */
    backbutton?: boolean;
    /**
     * Component status.
     */
    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
    /**
     * Label text displayed inside the status badge.
     */
    statuslabel?: string;
    /**
     * Additional information text shown below the title.
     */
    extrainfo?: string;
    /**
     * The callback triggered on click on back button.
     */
    onBack?: () => void;
    /**
     * The callback triggered on click on menu button.
     */
    onTogglemenu?: () => void;
  }

  let { title, shadow, backbutton, extrainfo, status, statuslabel, onBack, onTogglemenu }: Props =
    $props();

  let element: HTMLElement;

  function handleEvent(
    name: string,
    callback?: (value?: string | number | boolean) => void,
    value?: string | number | boolean,
  ) {
    callback?.();

    const event = new CustomEvent(name, {
      detail: value,
      bubbles: true,
      composed: true,
    });
    element.dispatchEvent(event);
  }
</script>

<div
  bind:this={element}
  class={{
    'mc-page-header': true,
    'mc-page-header--with-shadow': shadow,
  }}
>
  <div class="mc-page-header__top-wrapper">
    <div class="mc-page-header__top-content">
      {#if backbutton}
        <IconButton ghost aria-label="Back button" onclick={() => handleEvent('back', onBack)}>
          <ArrowBack24 slot="icon" />
        </IconButton>
      {/if}

      <div class="mc-page-header__content-wrapper">
        <span class="mc-page-header__title">
          {title}
        </span>

        {#if status || extrainfo}
          <div class="mc-page-header__info-wrapper">
            {#if statuslabel && status}
              <StatusBadge label={statuslabel} {status} />
            {/if}

            {#if extrainfo}
              <span class="mc-page-header__extra-info">
                {extrainfo}
              </span>
            {/if}
          </div>
        {/if}

        <slot name="content" />
      </div>
    </div>

    <div class="mc-page-header__actions-wrapper">
      <span class="mc-page-header__burger-menu">
        <IconButton
          ghost
          aria-label="Burger menu"
          onclick={() => handleEvent('toggle-menu', onTogglemenu)}
        >
          <Menu24 slot="icon" />
        </IconButton>
      </span>

      <div class="mc-page-header__actions-content">
        <slot name="actions" />
      </div>
    </div>
  </div>

  <div class="mc-page-header__tabs">
    <slot name="tabs" />
  </div>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-page-header,
.mc-page-header :host {
  --tabs-list-padding: 0.5rem 1rem;
}
@media screen and (min-width: 680px) {
  .mc-page-header,
  .mc-page-header :host {
    --tabs-list-padding: 0.5rem 2.5rem;
  }
}
.mc-page-header--with-shadow {
  box-shadow: var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-xs-opacity, 15%));
}
.mc-page-header__top-wrapper {
  padding: 0 0 0.75rem;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  background-color: var(--page-header-color-background, #ffffff);
}
@media screen and (min-width: 680px) {
  .mc-page-header__top-wrapper {
    padding: 0.75rem 2.5rem;
    flex-direction: row;
    gap: 2rem;
  }
}
.mc-page-header__top-content {
  padding: 0.5rem 0 0 0;
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
@media screen and (min-width: 680px) {
  .mc-page-header__top-content {
    padding: 0.5rem 0;
    gap: 0.75rem;
  }
}
.mc-page-header__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mc-page-header__title {
  font-size: var(--font-size-200, 1.125rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--page-header-color-text-title, #000000);
}
@media screen and (min-width: 680px) {
  .mc-page-header__title {
    font-size: var(--font-size-300, 1.5rem);
  }
}
.mc-page-header__info-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mc-page-header__extra-info {
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-regular, 400);
  color: var(--page-header-color-text-extra-info, #404040);
}
.mc-page-header__actions-wrapper {
  display: flex;
  align-items: start;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
  padding-right: 1rem;
}
@media screen and (min-width: 680px) {
  .mc-page-header__actions-wrapper {
    border-bottom: none;
    padding-right: 0;
  }
}
.mc-page-header__actions-wrapper .mc-page-header__burger-menu {
  display: inline-flex;
}
@media screen and (min-width: 680px) {
  .mc-page-header__actions-wrapper .mc-page-header__burger-menu {
    display: none;
  }
}
.mc-page-header__actions-content {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 680px) {
  .mc-page-header__actions-content {
    gap: 1rem;
  }
}
.mc-page-header__scope--tag {
  display: block;
}
@media screen and (min-width: 680px) {
  .mc-page-header__scope--tag {
    display: none;
  }
}
.mc-page-header__scope--select {
  display: none;
}
@media screen and (min-width: 680px) {
  .mc-page-header__scope--select {
    display: block;
  }
}
.mc-page-header__icons {
  display: flex;
  align-items: center;
}
.mc-page-header__tabs {
  border-top: 1px solid var(--divider-color-primary, #cccccc);
}</style>
