import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static get targets() {
    return ["pageAurora", "pageDashboard", "mailUnseen", "accountList", "modal"]
  }

  static values = {
    auroraThemeLight: String,
    auroraThemeDark: String
  }

  connect() {
    this.ready = false
    window.addEventListener("message", this.handleMessage.bind(this))
    window.addEventListener("theme-change", this.handleThemeChange.bind(this))
  }

  disconnect() {
    this.ready = false
    window.removeEventListener("message", this.handleMessage)
    window.removeEventListener("theme-change", this.handleMessage)
  }


  handleMessage(event) {
    const data = event.data || event.message;

    if (!data || !data.event) {
      return;
    }

    switch (data.event) {
      case "unseen-changed":
        this.unseenChanged(data.unseenValues)
        break
      case "account-list":
        this.handleAccountList(data.accounts)
        break
      case 'always-spam':
        this.mailboxSpamRuleBlocked(data.email)
        break
      case 'never-spam':
        this.mailboxSpamRuleAllowed(data.email)
        break
      default:
        console.log("Unknown event", data.event)
    }
  }

  handleAccountList(accounts) {
    if (window.location.pathname !== "/webmail/mail") {
      return;
    }

    if (accounts.length > 0) {
      this.accountListTarget.innerHTML = accounts.map(account => {
        return `<option value="${account.id}" ${account.isCurrent ? 'selected="selected"' : ''}>${account.email}</option>`
      }).join('')
    }
  }

  accountChanged(event) {
    this.sendMessage('change-account', { accountId: parseInt(event.target.value) });
  }

  handleThemeChange(event) {
    if (!this.ready) {
      return
    }

    if (event.detail.theme === "dark" && this.auroraThemeDarkValue) {
      this.changeTheme(this.auroraThemeDarkValue)
    } else {
      this.changeTheme(this.auroraThemeLightValue)
    }
  }

  iframeSwitch(e) {
    switch (window.location.hash) {
      case "mail":
        this.showMail()
        break
      case "calendar":
        this.showCalendar()
        break
      case "contacts":
        this.showContacts()
        break
      case "tasks":
        this.showTasks()
        break
      case "files":
        this.showFiles()
        break
      case "settings":
        this.showSettings()
        break
      case "sign_out":
        this.signOut()
        break
      default:
        this.showDashboard()
    }
  }

  unseenChanged(unseenValues) {
    unseenValues.forEach((unseen) => {
      if (unseen.tabName == "mail") {
        if (this.hasMailUnseenTarget) {
          if (unseen.unseenCount > 0) {
            this.mailUnseenTarget.innerHTML = unseen.unseenCount
            this.mailUnseenTarget.style.display = "block"
          } else {
            this.mailUnseenTarget.style.display = "none"
          }
        }
      }
      if (unseen.tabName == "calendar") {
        if (this.hasCalendarUnseenTarget) {
          if (unseen.unseenCount > 0) {
            this.calendarUnseenTarget.innerHTML = unseen.unseenCount
            this.calendarUnseenTarget.style.display = "block"
          } else {
            this.calendarUnseenTarget.style.display = "none"
          }
        }
      }
      if (unseen.tabName == "tasks") {
        if (this.hasTasksUnseenTarget) {
          if (unseen.unseenCount > 0) {
            this.hasTasksUnseenTarget.innerHTML = unseen.unseenCount
            this.hasTasksUnseenTarget.style.display = "block"
          } else {
            this.hasTasksUnseenTarget.style.display = "none"
          }
        }
      }
    })
  }

  mailboxSpamRuleAllowed(address) {
    this.modalTarget.src = '/mailbox/spam_rules/allow_list?address=' + address
  }

  mailboxSpamRuleBlocked(address) {
    this.modalTarget.src = '/mailbox/spam_rules/block_list?address=' + address
  }

  showMail(event) {
    this.showAurora()
    this.sendMessage("show-tab", { tab: "mail" })
    if (event) {
      event.cancelBubble = true
      event.stopPropagation()
    }
  }

  showCalendar(event) {
    this.sendMessage("show-tab", { tab: "calendar" })
    this.showAurora()
    if (event) {
      event.cancelBubble = true
      event.stopPropagation()
    }
  }

  showContacts(event) {
    this.sendMessage("show-tab", { tab: "contacts" })
    this.showAurora()
    if (event) {
      event.cancelBubble = true
      event.stopPropagation()
    }
  }

  showTasks(event) {
    this.sendMessage("show-tab", { tab: "tasks" })
    this.showAurora()
    if (event) {
      event.cancelBubble = true
      event.stopPropagation()
    }
  }

  showFiles(event) {
    this.sendMessage("show-tab", { tab: "files" })
    this.showAurora()
    if (event) {
      event.cancelBubble = true
      event.stopPropagation()
    }
  }

  showSettings(event) {
    this.sendMessage("show-tab", { tab: "settings" })
    this.showAurora()
    if (event) {
      event.cancelBubble = true
      event.stopPropagation()
    }
  }

  showDashboard(event) {
    this.hideAurora()
    if (event) {
      event.cancelBubble = true
      event.stopPropagation()
    }
  }

  showAurora() {
    document.querySelector('iframe').style.display = "block"
    this.pageDashboardTarget.style.display = "none"
  }

  hideAurora() {
    document.querySelector('iframe').style.display = "none"
    this.pageDashboardTarget.style.display = "block"
  }


  changeTheme(theme) {
    this.sendMessage("change-theme", { theme: theme })
  }

  signOut(event) {
    this.sendMessage("logout")
    this.redirectToSignOut()
    if (event) {
      event.cancelBubble = true
      event.stopPropagation()
    }
  }

  redirectToSignOut() {
    var f = document.createElement("form")
    f.action = "/users/sign_out"
    f.method = "POST"

    var i = document.createElement("input")
    i.type = "hidden"
    i.name = "authenticity_token"
    i.value = document.querySelector('meta[name="csrf-token"]').content
    f.appendChild(i)

    document.body.appendChild(f)
    f.submit()
  }

  sendMessage(event, data) {
    data = { event: event, ...data }
    if (this.hasPageAuroraTarget) {
      setTimeout(() => {
        if (!this.pageAuroraTarget.contentWindow) {
          return
        }
        this.pageAuroraTarget.contentWindow.postMessage(data, "*")
      }, 100)
    }
  }
};