import "./main.scss";

import { Elm } from './Main.elm'

if (process.env.NODE_ENV === 'development') {
  var CLIENT_ID = process.env.ELM_APP_KEYCLOAK_CLIENT_ID
} else {
  var CLIENT_ID = '{{.Env.ELM_APP_KEYCLOAK_CLIENT_ID}}'
}
/* global Keycloak */
var keycloak = Keycloak({
  url: '/auth',
  realm: 'havendev',
  clientId: 'havendev'
})
var storedProfile = sessionStorage.getItem('profile')
var storedToken = sessionStorage.getItem('token')
var storedSurveyState = sessionStorage.getItem('storedSurvey')
var authData =
  storedProfile && storedToken
    ? { profile: JSON.parse(storedProfile), token: storedToken }
    : null

var initialData = {
  profile: authData ? authData.profile : null,
  token: authData ? authData.token : null,
  storedSurvey: storedSurveyState ? JSON.parse(storedSurveyState) : null
}

var elmApp = Elm.Main.init({
  node: document.getElementById('elm'),
  flags: initialData
});

function sendElmKeycloakToken() {
  sessionStorage.setItem('profile', JSON.stringify(keycloak.profile))
  sessionStorage.setItem('token', keycloak.token)
  var result = { err: null, ok: null }
  result.ok = { profile: keycloak.profile, token: keycloak.token }
  elmApp.ports.keycloakAuthResult.send(result)
}

keycloak.onAuthSuccess = function () {
  keycloak
    .loadUserProfile()
    .success(sendElmKeycloakToken)
    .error(function (/* errorData */) {
      var result = { err: { name: 'unknown error' }, ok: null }
      elmApp.ports.keycloakAuthResult.send(result)
    })
}



keycloak.onAuthLogout = function () {
  console.log("got onAuthLogout callback");
  // send a null result to trigger our existing AuthResult code and logout.
  var result = { err: null, ok: null }
  sessionStorage.removeItem('profile')
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('storedSurvey')
  elmApp.ports.keycloakAuthResult.send(result)
}

keycloak.onAuthRefreshSuccess = sendElmKeycloakToken

keycloak.onAuthRefreshError = function () {
  console.log("got AuthRefreshError callback");
  // send a null result to trigger our existing AuthResult code and logout.
  var result = { err: null, ok: null }
  sessionStorage.removeItem('profile')
  sessionStorage.removeItem('token')
  elmApp.ports.keycloakAuthResult.send(result)
}

keycloak.onTokenExpired = function () {
  console.log('got keycloak token expired')
  keycloak.updateToken(300)
}

keycloak.init({ onLoad: 'check-sso', checkLoginIframe: false })

elmApp.ports.keycloakLogin.subscribe(function () {
  keycloak.login().error(function (/* errorData */) {
    alert('failed to initialize')
    // check for error, error_description
    // https://github.com/keycloak/keycloak-js-bower/blob/master/dist/keycloak.js#L506
  })
})

// Log out of keycloak
elmApp.ports.keycloakLogout.subscribe(function () {
  sessionStorage.removeItem('profile')
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('storedSurvey')
  keycloak.logout()
})

elmApp.ports.radarChart.subscribe(chartConfig => {
  chartConfig.type = 'radar'
  window.myRadar = new Chart(document.getElementById('chart'), chartConfig)
})

elmApp.ports.saveSurveyState.subscribe(storedSurvey => {
  sessionStorage.setItem('storedSurvey', JSON.stringify(storedSurvey));
})

let updateChart = function (spec) {
  //console.log("updateChart was called");
  window.requestAnimationFrame(() => {
    var element = $('#vis');
    if (element) {
      vegaEmbed("#vis", spec, { actions: false }).catch(console.warn);
    }
  });
}

elmApp.ports.renderVega.subscribe(updateChart);

document.arrive("#lottie", () => {
  var element = document.getElementById('lottie');
  var animationPath = process.env.PUBLIC_URL + '/animations/haven-demo.json'
  if (element) {
    console.log("got lottie element");
    lottie.setLocationHref(document.location.href)
    lottie.loadAnimation({
      container: element, // Required
      path: animationPath, // Required
      renderer: 'svg', // Required
      loop: true, // Optional
      autoplay: true, // Optional
    });
  }
});

@@ -224,119 +224,9 @@
 '%0A%7D%0A
-/* global Keycloak */%0Avar keycloak = Keycloak(%7B%0A  url: '/auth',%0A  realm: 'havendev',%0A  clientId: 'havendev'%0A%7D)
 %0A
+
 var 
@@ -701,103 +701,8 @@
 %0A%7D%0A%0A
-var elmApp = Elm.Main.init(%7B%0A  node: document.getElementById('elm'),%0A  flags: initialData%0A%7D);%0A%0A
 func
@@ -999,32 +999,144 @@
 send(result)%0A%7D%0A%0A
+/* global Keycloak */%0Avar keycloak = Keycloak(%7B%0A  url: '/auth',%0A  realm: 'havendev',%0A  clientId: 'havendev'%0A%7D)%0A%0A
 keycloak.onAuthS
@@ -1392,18 +1392,16 @@
   %7D)%0A%7D%0A%0A
-%0A%0A
 keycloak
@@ -2322,24 +2322,609 @@
 : false %7D)%0A%0A
+document.arrive(%22#lottie%22, () =%3E %7B%0A  var element = document.getElementById('lottie');%0A  var animationPath = process.env.PUBLIC_URL + '/animations/haven-demo.json'%0A  if (element) %7B%0A    console.log(%22got lottie element%22);%0A    lottie.setLocationHref(document.location.href)%0A    lottie.loadAnimation(%7B%0A      container: element, // Required%0A      path: animationPath, // Required%0A      renderer: 'svg', // Required%0A      loop: true, // Optional%0A      autoplay: true, // Optional%0A    %7D);%0A  %7D%0A%7D);%0A%0Avar elmApp = Elm.Main.init(%7B%0A  node: document.getElementById('elm'),%0A  flags: initialData%0A%7D);%0A%0A
 elmApp.ports
@@ -3952,16 +3952,16 @@
  %7D);%0A%7D%0A%0A
+
 elmApp.p
@@ -4004,494 +4004,4 @@
 t);%0A
-%0Adocument.arrive(%22#lottie%22, () =%3E %7B%0A  var element = document.getElementById('lottie');%0A  var animationPath = process.env.PUBLIC_URL + '/animations/haven-demo.json'%0A  if (element) %7B%0A    console.log(%22got lottie element%22);%0A    lottie.setLocationHref(document.location.href)%0A    lottie.loadAnimation(%7B%0A      container: element, // Required%0A      path: animationPath, // Required%0A      renderer: 'svg', // Required%0A      loop: true, // Optional%0A      autoplay: true, // Optional%0A    %7D);%0A  %7D%0A%7D);%0A

reorder js to be easier to follow logical flow