<template>
  <div class="wcc-loader-view" v-if="loading">
    <p class="wcc-loading-text">
      <loader />
      {{ $i18n.__("Fetching data", "webtoffee-cookie-consent") }}
    </p>
  </div>
  <div v-else>
    <notice type="warning" v-if="customHtmlMode">
      <p>
        <span>{{ $i18n.__("You're in Custom HTML mode. ") }}</span>
        {{
          $i18n.__(
            "The edits that you have made in the HTML Editor will override any changes made to the settings below",
            "webtoffee-cookie-consent"
          )
        }}
      </p>
    </notice>
    <div class="wcc-section-layout">
      <accordion-tab-content :language="language" />
    </div>
  </div>
</template>
<script>
import banners from "@/modules/banners/helpers/utils";
import Loader from "@/components/elements/Loader.vue";
import AccordionTabContent from "@/modules/banners/tabs/content/AccordionTabContent";
import Notice from "@/components/elements/Notice.vue";

export default {
  name: "TabContent",
  components: {
    Loader,
    AccordionTabContent,
    Notice,
  },
  data() {
    return {
      customHtmlMode: false,
    };
  },
  methods: {
    saveConfig: async function () {
      await banners.save();
      this.$root.$emit("triggerNotification", {
        type: "success",
        message: "Successfully saved",
      });
    },
  },
  computed: {
    banner() {
      return this.$store.state.banners.current;
    },
    loading() {
      return (
        this.$store.state.banners.current.id &&
        !this.$store.state.banners.current.id > 0
      );
    },
    appliedLaw() {
      return this.banner.properties.settings.applicableLaw;
    },
    presets() {
      return this.$store.state.banners.presets;
    },
    contentSections: function () {
      let contentSections = {};
      if (this.loading) {
        return contentSections;
      }
      const applicableLaw = this.banner.properties.settings.applicableLaw;
      contentSections = banners.getContentSections(applicableLaw);
      return contentSections;
    },
    colourSchemes: function () {
      let colourSchemes = [];
      if (this.loading) {
        return colourSchemes;
      }
      colourSchemes = [
        { id: "light", label: "Light" },
        { id: "dark", label: "Dark" },
        { id: "custom", label: "Custom" },
      ];
      return colourSchemes;
    },
    language() {
      return (
        (this.$store.state.languages.default &&
          this.$store.state.languages.default) ||
        "en"
      );
    },
  },
  watch: {
    "banner.properties.settings": {
      async handler() {
        banners.resetPreset();
        await banners.showPreview();
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss">
@include wrap-class() {
  .wcc-banner-theme-radio .wcc-radio {
    display: inline-flex;
    align-items: center;
    input[type="radio"] {
      margin-right: 5px;
    }
  }
}
</style>