// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import "react-phoenix"
import "../css/app.css"
// const _css = require("../css/app.css");

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import deps with the dep name or local files with a relative path, for example:
//
//     import {Socket} from "phoenix"
//     import socket from "./socket"
//
import "phoenix_html"
import {Socket} from "phoenix"
import topbar from "topbar"
import {LiveSocket} from "phoenix_live_view"

import SplashPage from './pages/SplashPage';
import JustPage from './pages/JustPage'
import ForPage from './pages/ForPage'
import YouPage from './pages/YouPage'

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

// 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())
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

window.Components = {
  SplashPage, JustPage, ForPage, YouPage
}

// const root_el = document.getElementById("root");
// const page = root_el.getAttribute("page")
// let result;

// switch(page) {
//   case "splash": 
//     result = <SplashPage />
//     break;
//   case "just":
//     result = <JustPage />
//     break;
//   case "for":
//   case "you":
//   case "identify":
//   case "revealed":
//   default:
//     null
//     break;
// }

// ReactDOM.render(<React.StrictMode>
//     <GlobalStyle />
//     { result }
//   </React.StrictMode>
//   ,
//   root_el
// );