<template>
  <div
    class="wcc-section wcc-section-cookies wcc-zero--padding wcc-zero--margin"
  >
    <div class="wcc-section-header wcc-align-center wcc-justify-between"></div>
    <div class="wcc-section-content wcc-cookie-section-content">
      <div class="wcc-row">
        <div class="wcc-col-12">
          <div
            role="navigation"
            class="wcc-nav-tab wcc-horizontal-tab wcc-nav-tab-manage-cookies"
          >
            <div
              class="wcc-nav-tabs-container wcc-justify-between wcc-nav-tab-horizontal-bar"
            >
              <ul class="wcc-horizontal-tabs">
                <li
                  :class="[
                    'wcc-nav-tab-item',
                    { active: currentTab === 'cookies' },
                  ]"
                >
                  <button
                    :class="[
                      'wcc-nav-tab-button wcc-center',
                      { active: currentTab === 'cookies' },
                    ]"
                    @click="changeTab('cookies')"
                    :data-test-id="'wcc-cookie-list-tab'"
                  >
                    <base-icon icon="list" color="#6E7681"></base-icon>
                    <span class="wcc-nav-tab-item-title">
                      {{
                        $i18n.__("Cookie List", "webtoffee-cookie-consent")
                      }}
                    </span>
                  </button>
                </li>
                <li
                  :class="[
                    'wcc-nav-tab-item',
                    { active: currentTab === 'scanner' },
                  ]"
                >
                  <button
                    :class="[
                      'wcc-nav-tab-button wcc-center',
                      { active: currentTab === 'scanner' },
                    ]"
                    @click="changeTab('scanner')"
                    :data-test-id="'wcc-scan-history-tab'"
                  >
                    <base-icon icon="search" color="#6E7681"></base-icon>
                    <span class="wcc-nav-tab-item-title">
                      {{
                        $i18n.__(
                          "Cookie Scanner",
                          "webtoffee-cookie-consent"
                        )
                      }}
                    </span>
                  </button>
                </li>
              </ul>
            </div>
            <div class="wcc-nav-tab-content-container">
              <component :is="currentTabComponent" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import TabCookies from "@/modules/cookies/tabs/TabCookies.vue";
import TabScanner from "@/modules/scanner/components/Scanner.vue";
import { visibility } from "@/mixins/visibility";
import BaseIcon from "@/components/icons/BaseIcon.vue";

export default {
  name: "Cookies",
  mixins: [visibility],
  components: {
    TabCookies,
    TabScanner,
    BaseIcon,
  },
  data() {
    return {
      tabs: [
        {
          id: "cookies",
          title: this.$i18n.__("Cookie List", "webtoffee-cookie-consent"),
          icon: false,
        },
        {
          id: "scanner",
          title: this.$i18n.__("Scan History", "webtoffee-cookie-consent"),
          icon: false,
        },
      ],
      currentTab: "cookies",
      scannerModalHeadingText: "",
      scannerModalContentText: "",
      lastScanId: 0,
    };
  },
  computed: {
    ...mapState("settings", ["options", "info"]),
    currentTabComponent: function () {
      return "tab-" + this.currentTab.toLowerCase();
    },
  },
  methods: {
    showIcon(tab) {
      return !!tab.icon;
    },
    changeTab(tab) {
      this.currentTab = tab;
    },
  },
  async mounted() {
    this.changeTab("cookies"); // Set the initial tab
  },
};
</script>
<style lang="scss">
.wcc-nav-tab-section-scanner {
  margin: 20px 0px 20px 0px;
  background: color(mono, white);
}
.wcc-app-modal-scanner {
  .wcc-app-modal-header {
    display: none;
  }
  .wcc-scanner-modal-content {
    text-align: center;
  }
  .wcc-app-modal-actions {
    align-self: center;
  }
}
.wcc-cookie-section-content {
  border: 1px solid #e9ebf8;
  border-radius: 9px;
}
</style>
