export class Connections extends HTMLElement {
  textEn = {
    add: 'Add connection',
    cancel: 'Cancel',
  }

  textEs = {
    add: 'Añadir conexión',
    cancel: 'Cancelar',
  }

  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.language = navigator.language
    this.content = document.createElement('div')
    const bGroup = document.createElement(
      'm-forms-button-group'
    )
    bGroup.addPrimary(this.text.add, () => {
      this.add()
    })
    this.shadowRoot.append(
      this.content,
      bGroup,
    )
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 5px;
      }
      m-dialog::part(footer) {
        padding-top: 15px;
      }
    `
    this.shadowRoot.append(style)
  }

  add() {
    const dialog = document.createElement('m-dialog')
    dialog.top = 180
    const edit = document.createElement(
      'm-settings-connection-edit'
    )
    dialog.bodyEl.append(edit)
    const bGroup = document.createElement(
      'm-forms-button-group'
    )
    bGroup.addPrimary(this.text.add, () => {
      const path = edit.pageInput.value
      const access = edit.accessSelect.value
      const exists = localStorage.getItem(path)
      if (!exists) {
        edit.error = 'doesntExist'
        return
      } else if (path === this.path) {
        edit.error = 'samePage'
        return
      } else if (path in this.data) {
        edit.error = 'alreadyConnected'
        return
      }
      this.data = {
        ...this.data,
        [path]: access,
      }
      dialog.close()
    })
    bGroup.addCancel(this.text.cancel, () => {
      dialog.close()
    })
    dialog.footerEl.appendChild(bGroup)
    this.shadowRoot.append(dialog)
    dialog.open()
  }

  display() {
    const entries = Object.entries(this.data)
    const content = entries.map(([path, access]) => {
      const el = document.createElement('div')
      el.innerText = `${path}: ${access}`
      return el
    })
    this.content.replaceChildren(...content)
  }

  set type(value) {
    this._type = value
  }

  get type() {
    return this._type
  }

  get data() {
    return this._data
  }

  set data(value) {
    this._data = value
    this.display()
  }

  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]
  }
}