/**
 * EdGEL masthead hero.
 */

import { html } from 'lit'
import { EdGELElement } from '../base.js'

export class EdGELMastheadHero extends EdGELElement {
  static properties = {
    // Set a title (required)
    titleText: { type: String, attribute: 'title-text' },
    // Set a link destination for the title
    titleLink: { type: String, attribute: 'title-link' },
    // Override the target for the UoE logo
    subtitleText: { type: String, attribute: 'subtitle-text' },
    // Set a subtitle
    subtitleLink: { type: String, attribute: 'subtitle-link' },
    // Should this be considered the page heading and rendered as an h1
    pageHeading: { type: Boolean, attribute: 'page-heading' },
    // URL for brand logo image
    brandSrc: { type: String, attribute: 'brand-src' },
    // Alt text for brand logo image
    brandAlt: { type: String, attribute: 'brand-alt' }
  }

  render() {
    if (!this.titleText || !this.titleLink) {
      return ''
    }

    const title = this.pageHeading ?
      html`<h1><a href=${this.titleLink} class="stretched-link">${this.titleText}</a></h1>` :
      html`<a class="h1 stretched-link" href=${this.titleLink}>${this.titleText}</a>`

    let subtitle = html``
    if (this.subtitleText && this.subtitleLink) {
      subtitle = this.pageHeading ?
        html`<h2><a href=${this.subtitleLink}>${this.subtitleText}</a></h2>` :
        html`<a class="h2" href=${this.subtitleLink}>${this.subtitleText}</a>`
    }

    const content = this.innerHTML.replaceAll(/<!--[^>]*-->/gm, '').trim()

    const branding = this.brandSrc && content ?
      html`
        <div class="container-branding">
          <img class="masthead-branding" src=${this.brandSrc} alt=${this.brandAlt}>
        </div>
      ` :
      html``

    const banner = content ?
      html`
        <div class="masthead-banner">
          <slot></slot>
          ${branding}
        </div>
      ` :
      html``

    return html`
      <div class="masthead-hero">
        ${banner}
        <div class="masthead-title">
          ${title}
          ${subtitle}
        </div>
      </div>
    `
  }
}
