<template>
  <teleport to="body">
    <modal :z-index="9001" :state="showHelp">
      <div class="help-modal-container">
        <div class="help-modal-header">
          <icon-button icon="x" @click="helpStore.closeHelp()"/>
        </div>
        <div class="help-container">
          <div class="help-menu-container">
            <the-help-menu @changePage="updatePage" :currentPage="currentPage" :pages="pages"/>
          </div>
          <div class="help-content-container">
            <h2 class="page-header">{{ title }}</h2>
            <tab-container :tabs="tabsConfig"></tab-container>
          </div>
        </div>
      </div>
    </modal>
  </teleport>
</template>

<script>
import Modal from "@/components/UI/Modal.vue";
import {mapStores} from "pinia";
import Help from "@/components/layout/help/Help.vue";
import {useHelpStore} from "@/store/help.js";
import TheHelpMenu from "@/components/layout/help/TheHelpMenu.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import IconButton from "@/components/UI/IconButton.vue";
import TabContainer from "@/components/UI/TabContainer.vue";
import {markRaw} from "vue";
import Nodes from "@/components/layout/config/Nodes.vue";
import HelpVideo from "@/components/layout/help/HelpVideo.vue";
import HelpText from "@/components/layout/help/HelpText.vue";

export default {
  name: "TheHelpSystem",
  components: {TabContainer, IconButton, BasicButton, TheHelpMenu, Help, Modal},
  data() {
    return {
      tabsConfig: [
        {
          title: 'Video',
          component: markRaw(HelpVideo),
          props: {isSelected: false},
        },
        {
          title: 'Text',
          component: markRaw(HelpText),
          props: {isSelected: false},
        },
      ]
    }
  },
  computed: {
    ...mapStores(useHelpStore),
    showHelp() {
      return this.helpStore.showHelp;
    },
    currentPage() {
      return this.helpStore.currentPage;
    },
    title() {
      return this.helpStore.title;
    },
    pages() {
      return this.helpStore.pages;
    }
  },
  methods: {
    async updatePage(page) {
      await this.helpStore.getContent(page);
    }
  },
  created() {
    this.helpStore.loadPages();
  }
}
</script>

<style scoped>


.help-modal-container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: min(80vw, 180rem);
  height: min(90vh, 120rem);
  min-height: 0;
}

.help-modal-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}

.help-container {
  display: flex;
  flex-direction: row;
  gap: 2.4rem;
  flex: 1;
  min-height: 0;
}

.help-menu-container {
  flex: 0 0 auto;
  min-width: fit-content;
}

.help-content-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.page-header {
  flex-shrink: 0;
}
</style>