// If you want to use Phoenix channels, run `mix help phx.gen.channel`
// to get started and then uncomment the line below.
// import "./user_socket.js"

// You can include dependencies in two ways.
//
// The simplest option is to put them in assets/vendor and
// import them using relative paths:
//
//     import "../vendor/some-package.js"
//
// Alternatively, you can `npm install some-package --prefix assets` and import
// them using a path starting with the package name:
//
//     import "some-package"
//

// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
import "phoenix_html"
// Establish Phoenix Socket and LiveView configuration.
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"

function base64ToArray(base64String) {
  return Uint8Array.from(window.atob(base64String), (c) => c.charCodeAt(0));
}

function arrayToBase64(buffer) {
  return window.btoa(
    Array.from(new Uint8Array(buffer), (c) => String.fromCharCode(c)).join("")
  );
}


const registrationHook = {
  mounted() {
    this.handleEvent("registration-challenge", (event) => this.handleRegistration(event, this))
  },

  async handleRegistration(event, context) {
    try {
       const {
        attestation,
        challenge,
        rp,
        user,
        timeout,
        excludeCredentials,
      } = event;
      user.id = base64ToArray(user.id)
      excludeCredentials.forEach(cred => {
        cred.id = base64ToArray(cred.id)
      })
      const publicKey = {
        attestation,
        challenge: base64ToArray(challenge),
        excludeCredentials,
        pubKeyCredParams: [{ alg: -7, type: "public-key" }, { alg: -8, type: "public-key" }, { alg: -257, type: "public-key"}],
        authenticatorSelection: {
          authenticatorAttachement: "explicitly invalid, working around bitwarden",
          residentKey: "discouraged"
        },
        user,
        timeout,
        rp,
      }
      const credential = await navigator.credentials.create({ publicKey })
      context.pushEventTo(context.el, "registration-complete", {
        attestation64: arrayToBase64(credential.response.attestationObject),
        clientData: Array.from(new Uint8Array(credential.response.clientDataJSON)),
        id: arrayToBase64(credential.rawId),
        type: credential.type
      })
    } catch (error) {
      console.error(error)
      const { message, name, stack } = error;
      context.pushEventTo(context.el, "error", { message, name, stack });
    }
  }
}

const authenticationHook = {
  mounted() {
    this.handleEvent("authentication-challenge", (event) => this.handleAuthentication(event, this))
  },

  async handleAuthentication(event, context) {
    try {
      const {
        challenge, allowCredentials
      } = event;
      allowCredentials.forEach(cred => {
        cred.id = base64ToArray(cred.id)
      })
      const { type, response: { signature, authenticatorData, clientDataJSON, userHandle }, rawId } = await navigator.credentials.get({
        publicKey: {
          challenge: base64ToArray(challenge),
          allowCredentials,
          timeout: 60000
        }
      })
      context.pushEventTo(context.el, "authentication-credential", {
        type: type,
        id: arrayToBase64(rawId),
        signature: arrayToBase64(signature),
        authenticatorData: arrayToBase64(authenticatorData),
        clientData: Array.from(new Uint8Array(clientDataJSON)),
        userHandle: arrayToBase64(userHandle)
      })
    } catch (error) {
      console.error(error)
      const { message, name, stack } = error;
      context.pushEventTo(context.el, "error", { message, name, stack });
    }
  }
}

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: { registrationHook, authenticationHook }})

// Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())

// connect if there are any LiveViews on the page
liveSocket.connect()

// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket