<template>
  <div
    class="wcc-tab-content-accordion"
    v-if="!loading"
    :class="[{ 'wcc-app-rtl': isRTLLanguage(language) }]"
  >
    <accordion type="boxed" name="banner_contents">
      <component
        v-for="contentSection in contentSections"
        v-bind:key="contentSection.id"
        :is="contentSection.id"
        :content="content"
        :translate="translate"
        :disabled="disabled"
        :language="language"
      ></component>
      <translation-modal
        ref="TranslationModal"
        :code="this.siteLanguage"
        :is-multilingual="this.isMultilingual"
      ></translation-modal>
    </accordion>
  </div>
</template>
<script>
import Loader from "@/components/elements/Loader.vue";
import BaseIcon from "@/components/icons/BaseIcon.vue";
import banners from "@/modules/banners/helpers/utils";
import AccordionItem from "@/components/accordion/AccordionItem.vue";
import Accordion from "@/components/accordion/Accordion.vue";
import languages from "@/modules/languages/helpers/utils";
import TranslationModal from "@/modules/banners/components/TranslationModal.vue";

import AccordionNotice from "@/modules/banners/tabs/content/accordions/AccordionNotice.vue";
import AccordionPreference from "@/modules/banners/tabs/content/accordions/AccordionPreference.vue";
import AccordionCookieList from "@/modules/banners/tabs/content/accordions/AccordionCookieList.vue";
import AccordionRevisitConsent from "@/modules/banners/tabs/content/accordions/AccordionRevisitConsent.vue";
import AccordionBlockedContent from "@/modules/banners/tabs/content/accordions/AccordionBlockedContent.vue";
import AccordionOptOutCenter from "@/modules/banners/tabs/content/accordions/AccordionOptOutCenter.vue";

export default {
  name: "AccordionTabContent",
  components: {
    Loader,
    BaseIcon,
    Accordion,
    AccordionItem,
    AccordionNotice,
    AccordionPreference,
    AccordionCookieList,
    AccordionRevisitConsent,
    AccordionBlockedContent,
    AccordionOptOutCenter,
    TranslationModal,
  },
  props: {
    language: {
      type: String,
      default: "en",
    },

    disabled: {
      type: Boolean,
      default: false,
    },
    translate: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      accordionOpened: false,
      isMultilingual: false,
      siteLanguage: null, // Initialize siteLanguage to null
    };
  },
  computed: {
    banner() {
      return this.$store.state.banners.current;
    },
    contentSections: function () {
      let contentSections = [];
      if (this.loading) {
        return contentSections;
      }
      const applicableLaw = this.banner.properties.settings.applicableLaw;
      contentSections = banners.getContentSections(applicableLaw);
      return contentSections;
    },
    loading() {
      return (
        !this.$store.state.banners.current.id > 0 && this.siteLanguage !== null
      );
    },
    content() {
      let content = this.banner.contents[this.language];
      if (content === undefined || content === "") {
        content = this.banner.contents["en"];
      }
      return content;
    },
  },
  methods: {
    getSiteLanguage() {
      this.siteLanguage =
        this.$store.state.settings.info.site_language.language || "en";
    },
    isTranslated(lang = "en") {
      const supported = languages.getTranslatedLanguages();
      return supported.includes(lang);
    },
    isMultilingualSite() {
      this.isMultilingual =
        this.$store.state.settings.info.multiligual.status;
    },
  },

  mounted() {
    this.getSiteLanguage();
    this.isMultilingualSite();
    let show_modal = this.getOption("translation_modal").show;
    this.$root.$on("AccordionOpened", (data) => {
      if (data.name === "banner_contents") {
        if (
          this.isMultilingual || // Check if it's a multilingual site
          this.siteLanguage !== this.language // Check if siteLanguage is different from current language
        ) {
          if (!this.accordionOpened && !!show_modal) {
            setTimeout(() => {
              // Show the TranslationModal only if any accordion item is opened
              this.$refs.TranslationModal.open();
              this.accordionOpened = true;
            }, 5000); // 5000 milliseconds = 5 seconds
          }
        }
      }
    });
  },
};
</script>
<style lang="scss">
.wcc-tab-content-accordion {
  margin-top: 10px;
  .wcc-app-accordion-item {
    border: 1px solid #e6eaf0;
  }
  .wcc-app-accordion-content {
    .wcc-color-picker-input {
      background-color: #ffff;
      width: 100%;
      border: 2px solid #f6f7f7;
    }
  }
  .wcc-app-accordion-item:last-child {
    margin-bottom: 12px;
  }
}
.wcc-app-rtl {
  input,
  .wcc-rich-text-editor,
  .wcc-rich-text-editor *,
  .wcc-rich-text-editor-container * {
    direction: rtl;
    text-align: right;
  }
}
</style>
