export class PageSettings extends HTMLElement {
  textEn = {
    netAccess: 'Direct network access (CSP)',
  }

  textEs = {
    netAccess: 'Acceso directo a la red (CSP)',
  }

  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.language = navigator.language
    const netSelectHeading = document.createElement('div')
    netSelectHeading.classList.add('heading')
    netSelectHeading.innerText = this.text.netAccess
    this.network = document.createElement(
      'm-settings-network-settings'
    )
    this.shadowRoot.append(
      netSelectHeading,
      this.network,
    )
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        max-height: 55vh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
      }
      * {
        padding-left: 10px;
      }
      div.heading {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background: #f2dbd8;
        padding: 3px;
        margin-bottom: 5px;
        font-weight: bold;
      }
    `
    this.shadowRoot.append(style)
  }

  get data() {
    return {
      ...this.network.data,
    }
  }

  set data(value) {
    this.network.data = {
      networkAccess: value.networkAccess
    }
  }

  set cspProfiles(value) {
    this.network.cspProfiles = value
  }

  get language() {
    return this._language
  }

  set language(language) {
    this._language = language
    this.text = this.langEs ? this.textEs : this.textEn
  }

  get langEs() {
    return /^es\b/.test(this.language)
  }

  get lang() {
    return this.language.split('-')[0]
  }
}