<template>
  <div id="app">
    <LoopsHeader />
    <HorizontalMenu />
    <router-view />
    <LoopsStatusBar />
    <ErrorMessage />
  </div>
</template>

<script>
import LoopsHeader from "./components/Header/LoopsHeader";
import HorizontalMenu from "./components/Header/HorizontalMenu";
import LoopsStatusBar from "./components/LoopsStatusBar";
import ErrorMessage from "./components/ErrorMessage";
import { mapActions } from "vuex";
import Vue from "vue";

export default {
  name: "App",
  components: {
    LoopsHeader,
    HorizontalMenu,
    LoopsStatusBar,
    ErrorMessage,
  },
  created: function () {
    window.addEventListener("unhandledrejection", (event) => {
      if (event.reason && event.reason.ignoreUnhandledRejection) {
        event.preventDefault();
      } else {
        console.error("An error (promise rejection) occured:\n", event);

        // this.setErrorMessage({
        //   error: `An error (promise rejection) occured:\n ${event}`,
        // });
      }
    });

    window.addEventListener("rejectionhandled", (event) => {
      console.warn("Promise rejection handled", event);
    });

    Vue.config.errorHandler = (err, vm, info) => {
      let details =
        err?.response?.data?.message ?? err?.response?.data?.error ?? err;
      this.setErrorMessage({
        error: details,
      });
    };

    window.onerror = (msg, url, line, col, error) => {
      if (error.ignoreUnhandledRejection) {
        return;
      }
      console.error(msg, url, line, col, error);

      this.setErrorMessage({
        error: `An unhandled error occured:\n ${msg}\n${error}`,
      });
    };
  },
  methods: {
    ...mapActions(["setErrorMessage"]),
  },
  watch: {
    $route(to) {
      if (to.meta.reload == true) {
        window.location.reload();
      }
    },
  },
};
</script>

<style>
@font-face {
  font-family: "EBI-Conceptual";
  src: url("./assets/EBI-Conceptual.woff2") format("woff2");
}
@font-face {
  font-family: "EBI-Common";
  src: url("./assets/EBI-Common.woff2") format("woff2");
}

.static-element-header {
  font-size: medium;
  color: white;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  background: var(--cancel-grey);
  border-radius: 10px 10px 0px 0px;
  margin: 10px 5px 0px 5px;
}

.static-element {
  background: var(--neutral);
  border-radius: 0px 0px 10px 10px;
  margin: 0px 5px 10px 5px;
  padding: 10px;
}

.censor {
  /* filter: blur(4px); */
}

.workspace {
  max-width: 940px;
  margin: auto;
  margin-bottom: 40px;
}

@media (min-width: 950px) {
  .workspace {
    max-width: 1370px;
    margin: auto;
  }
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial,
    sans-serif;
  --accent: #af5350;
  --accent50: #ce8f90;
  --cancel-grey: rgb(100, 100, 100);
  --neutral: #eeeeee;
  --scaffold: #ac2817;
  --scaffold-light: #d6321d;
  --insert: #179bac;
  --insert-light: #1dc1d6;
  --gradient: linear-gradient(90deg, #0f6975 0%, #179bac 50%, #1dc1d6 100%);

  background: #faf9f8;
}
#app {
  min-height: 100vh;
  margin: 0;
  margin-bottom: 1.5em; /*make room for status bar*/

  /* background-color: white;
  background-size: 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  background-image: 
    linear-gradient(rgb(211, 211, 211, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgb(211, 211, 211, 0.3) 1px, transparent 1px); */
}

.row {
  display: flex;
}

.row > * {
  margin-left: 5px;
  margin-right: 5px;
}

.row > .growing {
  width: 100%;
}

.vue-file-agent.file-input-wrapper {
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row,
.dividor,
.capped-width {
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 950px) {
  .workspace-grid {
    display: grid;
    grid-template-columns: 480px auto;
  }
}

@media (min-width: 1400px) {
  .row,
  .dividor,
  .capped-width {
    max-width: 1370px;
  }
}

.dividor {
  border-bottom: 1px solid silver;
  margin-top: 5px;
  margin-bottom: 5px;
}

.dividor-important {
  border-bottom: 1px solid grey;
  margin: 10px;
}

button,
.button {
  border: none;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
  background: grey;
  color: var(--neutral);
  text-overflow: ellipsis;
}

.button:hover {
  background: var(--accent);
  outline: none;
}

.prompt {
  position: relative;
}
.hint-text {
  visibility: hidden;
  position: absolute;
  width: max-content;
  right: 0.7em;
  margin-left: auto;
  margin-right: auto;
  background: rgba(95, 95, 95, 0.95);
  white-space: pre-line;
  display: block;
  text-align: justify;
  max-width: 800px;
  margin-top: 5px;
  padding: 0.8em;
  color: white;
  z-index: 10;

}

.hint-text-right {
  right: 0;
  left: 0.7em;
}

.prompt:hover .hint-text {
  visibility: visible;
}

.multiselect__tag,
.multiselect__option--highlight {
  background: grey;
  border-radius: 0px;
}

.multiselector >>> .multiselect__tag-icon {
  background: var(--cancel-grey);
  border-radius: 0px;
}

.multiselector >>> .multiselect__tag-icon::after {
  color: white;
}

.multiselector >>> .multiselect__tag-icon:hover {
  background: var(--accent);
}

.multiselector >>> .multiselect__tag {
  border-radius: 5px;
}

.multiselector >>> .multiselect__option--highlight:after {
  display: none;
}

.multiselector >>> .multiselect__spinner:after {
  border-color: var(--accent) transparent transparent;
}
</style>
