/**
 * EdGEL footer.
 */

import { css, html } from 'lit'
import { EdGELElement } from '../base.js'
import { dataUrl } from '../../images/footer-affiliations.js'

const AFFILIATIONS_LINK = 'https://www.ed.ac.uk/about/mission-governance/affiliations'

export class EdGELFooter extends EdGELElement {
  static properties = {
    // Set a link destination for the login link if it's required
    loginLink: { type: String, attribute: 'login-link' }
  }
  static styles = [
    css`.footer-subsite-content [class^=col] > ::slotted(*) { margin-bottom: .8rem; }`
  ]

  constructor() {
    super()

    // Uses the Subsite Affiliation images slot
    this.hasSubsiteImages = false
    // Uses the Subsite Content slot
    this.hasSubsiteContent = false

    this.observer = new MutationObserver(this._checkSlots.bind(this))
  }

  _checkSlots() {
    const element = this.shadowRoot ? this.shadowRoot.host : this
    this.hasSubsiteContent = Boolean(element.querySelector('[slot^="block"]'))
    this.hasSubsiteImages = Boolean(element.querySelector('[slot="images"]'))

    this.requestUpdate()
  }

  connectedCallback() {
    super.connectedCallback()
    this._checkSlots()

    this.observer.observe(this.shadowRoot.host, { childList: true, subtree: true })
  }

  disconnectedCallback() {
    super.disconnectedCallback()

    this.observer.disconnect()
  }

  render() {
    const subsiteImages = this.hasSubsiteImages ?
      html`
        <div class="footer-affiliations">
          <div class="container-footer">
            <slot name="images"></slot>
          </div>
        </div>
      ` :
      html``

    const subsiteContent = this.hasSubsiteContent ?
      html`
        <div class="footer-subsite-content">
          <div class="container-footer">
            <div class="row">
              <div class="col-md-6 col-lg-4">
                <slot name="block1"></slot>
              </div>
              <div class="col-md-6 col-lg-4">
                <slot name="block2"></slot>
              </div>
              <div class="col-md-6 col-lg-4">
                <slot name="block3"></slot>
              </div>
            </div>
          </div>
        </div>
      ` :
      html``

    const loginHtml = this.loginLink ?
      html`
        <div class="container-footer">
          <a class="footer-login-link" href=${this.loginLink}>
            <slot name="login-text"><abbr>CMS</abbr> login</slot>
            <edgel-icon name="chevron-right"></edgel-icon>
          </a>
        </div>
      ` :
      html``

    return html`
      <footer>
        ${subsiteImages}
        ${subsiteContent}
        <div class="footer-discover">
          <h3 class="footer-discover-heading">
            The University of Edinburgh
          </h3>
        </div>

        <div class="footer">
          <div class="container-footer">
            <div class="row">
              <div class="col-md-4">
                <slot name="links1">
                  <ul class="list-unstyled">
                    <li><a href="https://www.ed.ac.uk/university-secretary-group/complaint-handling-procedure">Complaints procedure</a></li>
                    <li><a href="https://www.ed.ac.uk/sustainability/modern-slavery-statement">Modern slavery</a></li>
                  </ul>
                </slot>
              </div>
              <div class="col-md-4">
                <slot name="links2">
                  <ul class="list-unstyled">
                    <li><a href="https://www.ed.ac.uk/about/website/freedom-information">Freedom of information publication scheme</a></li>
                    <li><a href="https://www.ed.ac.uk/data-protection">Data Protection</a></li>
                  </ul>
                </slot>
              </div>

              <div class="col-md-4 col-6 justify-content-end">
                <a href=${AFFILIATIONS_LINK}>
                  <img class="img-fluid" alt="University affiliations" src=${dataUrl}>
                </a>
              </div>
            </div>

            <div class="row">
              <div class="col-md-4 order-md-2">
                <p class="float-end">
                  <a class="btn btn-brand btn-sm" href="https://www.myed.ed.ac.uk/">
                    MyEd login
                    <edgel-icon name="chevron-right"></edgel-icon>
                  </a>
                </p>

              </div>
              <div class="col-md-8 order-md-1">
                <p>
                  The University of Edinburgh is a charitable body, registered in Scotland, with registration number
                  SC005336, VAT Registration Number GB&nbsp;592&nbsp;9507&nbsp;00, and is acknowledged by the UK authorities as a
                  “<a href="https://www.gov.uk/guidance/recognised-uk-degrees">Recognised body</a>” which has been
                  granted degree awarding powers.
                </p>

              </div>
            </div>
          </div>
        </div>

        <div class="container-footer-copyright">
          <slot name="copyright">
            Unless explicitly stated otherwise, all material is
            copyright © The University of Edinburgh.
          </slot>
        </div>

        ${loginHtml}
      </footer>
    `
  }
}
