<template>
  <DocksView @closeModal="$emit('closeModal')" />
</template>

<script>
import Vue from "vue";
import global from "../mixins/Global";
import DocksView from "./components/DocksView/index.vue";
import dockView from "./store/modules/dockView.store";
import i18n from "./plugins/language";
import { language as fieldeasLanguage } from 'fieldeas-web'

const MAPPING = {
  [fieldeasLanguage.Spanish]: 'es-ES',
  [fieldeasLanguage.English]: 'en-GB',
  [fieldeasLanguage.French]: 'en-GB',
  [fieldeasLanguage.Russian]: 'en-GB',
  [fieldeasLanguage.German]: 'en-GB',
  [fieldeasLanguage.Italian]: 'en-GB',
  [fieldeasLanguage.Portuguese]: 'pt-PT',
  [fieldeasLanguage.Catalan]: 'en-GB'
}

export default {
  name: "fieldeas-docks-view",
  props: {
    client: {
      default: null,
    },
    token: {
      default: null,
    },
    user: {
      default: null,
    },
    showCloseButton: {
      default: true,
    },
  },
  components: {
    DocksView,
  },
  mixins: [global],
  beforeCreate() {
    if (this.$store && !this.$store.hasModule("dockView")) {
      this.$store.registerModule("dockView", dockView);
    }
  },
  beforeMount() {
    const fieldeasDocksOptions = {
      client: this.client,
      token: this.token,
      user: this.user,
      showCloseButton: this.showCloseButton,
    };

    if (this.$i18n) {
      this.$i18n.mergeLocaleMessage(
        MAPPING[this.user.Language],
        i18n[this.user.Language]
      );
    }

    this.$store.commit("_setDockViewUser", this.user);
    this.$store.commit("_setDockViewToken", this.token);
    this.$store.commit("_setDockViewClient", this.client);

    fieldeasDocksOptions.isDark = this.isDark(
      this.$vuetify.theme.themes.light.primary
    );

    fieldeasDocksOptions.isToolbarDark = this.isDark(
      fieldeasDocksOptions.toolbarColor ||
        this.$vuetify.theme.themes.light.primary
    );

    fieldeasDocksOptions.textColor = fieldeasDocksOptions.isDark
      ? "#ffffff"
      : "#000000";
    fieldeasDocksOptions.textClass = fieldeasDocksOptions.isDark
      ? "docksView--white-text"
      : "docksView--black-text";

    this.$store.commit("_setFieldeasDocksOptions", fieldeasDocksOptions);
  },
};
</script>

<style>
.docksView--white-text {
  color: #ffffff !important;
}
.docksView--black-text {
  color: #000000 !important;
}
</style>