<template>
  <div class="wcc-banner-selector">
    <label class="wcc-label">{{
      $i18n.__("Customize", "webtoffee-cookie-consent")
    }}</label>
    <template v-if="showDropdown">
      <dropdown
        ref="languageSelector"
        class="wcc-dropdown-banners"
        :text="getBannerName(banner)"
      >
        <ul>
          <li
            v-for="banner in filteredBanners"
            v-bind:key="banner.id"
            class="wcc-drop-down-item"
          >
            <base-popper
              :content="
                banner.properties.settings.applicableLaw === 'gdpr'
                  ? $i18n.__(
                      'The selected template (opt-in banner) supports GDPR (EU & UK), LGPD (Brazil), PIPEDA (Canada), POPIA (South Africa), nFADP (Switzerland), Privacy Act (Australia), PDPL (Argentina), PDPL (Andorra), DPA (Faroe Island).',
                      'webtoffee-cookie-consent'
                    )
                  : $i18n.__(
                      'The selected template (opt-out banner) supports CCPA/CPRA (California), VCDPA (Virginia), CPA (Colorado), CTDPA (Connecticut), & UCPA (Utah).',
                      'webtoffee-cookie-consent'
                    )
              "
              position="right"
            >
              <a
                v-bind:value="banner.id"
                href="#"
                target="_self"
                v-on:click.prevent="changeBanner(banner.id)"
              >
                {{ getBannerName(banner) }}
              </a>
            </base-popper>
          </li>
        </ul>
      </dropdown>
    </template>
    <template v-else>
      <span class="wcc-choosen-banner">
        <span v-for="lawId in selectedLaws" :key="lawId">
          <label class="wcc-label wcc-choosen-banner-label wcc-dropdown-anchor">
            {{ getBannerName(lawId) }}
          </label>
        </span>
      </span>
    </template>
  </div>
</template>
<script>
import Dropdown from "@/components/Dropdown.vue";
import banners from "@/modules/banners/helpers/utils";

export default {
  name: "BannerSelector",
  components: {
    Dropdown,
  },
  data() {
    return {
      laws: ["gdpr", "ccpa", "gdpr&ccpa"],
    };
  },
  methods: {
    async changeBanner(id) {
      banners.toggleBanner(id);
    },
    getBannerName(banner) {
      if (banner.id === 2 || banner === "CCPA") {
        return "US State Laws";
      } else if (banner === "GDPR") {
        return "GDPR";
      }
      return banner.name;
    },
  },
  computed: {
    banner() {
      return this.$store.state.banners.current;
    },
    banners() {
      return this.$store.state.banners.items || {};
    },
    selectedLaws() {
      return this.$store.state.settings.options.banners.selected;
    },
    showDropdown() {
      return this.selectedLaws.length > 1;
    },
    filteredBanners() {
      return this.banners.filter((banner) =>
        this.selectedLaws.includes(banner.name)
      );
    },
  },
};
</script>
<style lang="scss">
@include wrap-class() {
  .wcc-banner-selector {
    display: flex;
    width: 330px;
    align-items: center;
    padding-left: 12px;
    position: relative;

    .wcc-dropdown-content {
      min-width: 188px;
      a {
        color: #23282d;
      }
      left: 100px;
      width: auto;
    }
    .wcc-label {
      margin-bottom: 1px;
      font-weight: 500;
    }
    .wcc-dropdown {
      .wcc-dropdown-anchor {
        background-color: transparent;
        border: none;
      }
    }
    .wcc-popper {
      width: 200px;
    }
    .wcc-popper-container {
      margin-left: 0px;
      width: 100%;
    }
  }
  .wcc-choosen-banner {
    width: 100px;
    margin-left: 12px;
  }
  .wcc-choosen-banner .wcc-label {
    font-weight: 400;
    color: #000;
  }
  .wcc-banner-selector-section .wcc-banner-preview-toggler {
    margin-left: 0px;
  }
  .wcc-dropdown-banners {
    position: absolute;
    left: 24px;
  }
}
</style>