import {LitElement, html, css, unsafeCSS} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import { breakpoints } from '../../breakpoints';

/**
 * Title block.
 *
 * @slot - This element has a slot
 */
@customElement('iu-heading')

export class Heading extends LitElement {
  static override styles = css`
      :host{
        display: block;
        margin-top: var(--iu-heading-margin-top, 0);
        margin-bottom: var(--iu-heading-margin-bottom, var(--iu-spacing-block-sm));
        --iu-heading-color: var(--iu-color-black);
        --iu-heading-link-color: var(--iu-color-grey-300);
      }
      h1,h2,h3,h4,h5,h6{
        color: var(--iu-heading-color);
        margin: 0;
        font-weight: 400;
      }
      .size-1 h1,
      .size-1 h2,
      .size-1 h3,
      .size-1 h4,
      .size-1 h5,
      .size-1 h5
      {
        font: var(--iu-f-lg);
      }
      .size-2 h1,
      .size-2 h2,
      .size-2 h3,
      .size-2 h4,
      .size-2 h5,
      .size-2 h5
      {
        font: var(--iu-f-2xl);
      }
      .inner{
        // width: calc(100% / 12 * 11);
        width: 100%;
        border-top: 1px solid var(--iu-color-black);
        padding-top: 0.75rem;
      }
      @media ${unsafeCSS(breakpoints.md)} {
        .inner{
          display: flex;
          justify-content: space-between; 
          align-items: baseline;  
        }
      }
      .inner.no-divider{
        border-top: 0;
        padding-top: 0;
      }
      .inner.has-link{
        width: 100%;
      }
      a{
        font: var(--iu-f-lg);
        text-decoration: none !important;
        color: var(--iu-heading-link-color);
        flex-shrink: 0;
      }
      iu-container{
        margin-bottom: 0;
      }
  `;

  @property() text = '';
  @property() href = '';
  @property() link = '';

  @property({type: Number}) size = 1;
  @property({type: Number}) tag = 2;

  @property({type: Boolean}) noDivider = false;
  @property({type: Boolean, reflect: true}) nested: boolean = false;

  override render() {

    const linkTemplate = this.href
    ? html`<a href="${this.href}" part="link">${this.link}</a>`
    : null;

    const getHeadingTemplate = (tag, text) => {
      switch (tag) {
        case 1:
          return html`<h1 part="title">${text}</h1>`;
        case 2:
          return html`<h2 part="title">${text}</h2>`;
        case 3:
          return html`<h3 part="title">${text}</h3>`;
        case 4:
          return html`<h4 part="title">${text}</h4>`;
        case 5:
          return html`<h5 part="title">${text}</h5>`;
        case 6:
          return html`<h6 part="title">${text}</h6>`;
        default:
          return html`<h2 part="title">${text}</h2>`; 
      }
    };
  
    const contentTemplate = getHeadingTemplate(this.tag, this.text);
  
    return html`
      <iu-container ?nested=${this.nested}>
        <div class="inner size-${this.size} ${this.noDivider ? 'no-divider' : ''} ${this.href ? 'has-link' : ''}">
          ${contentTemplate}
          ${linkTemplate}
        </div>
      </iu-container>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-heading': Heading;
  }
}