<template>
  <fragment>
    <div class="wcc-banner-region-selector">
      <div class="wcc-row">
        <label class="wcc-col-3 wcc-col-label">
          {{ geoTargetHeading }}
        </label>
        <div class="wcc-col-9" style="display: flex; align-items: center">
          <div
            class="wcc-form-check wcc-align-center"
            style="margin-bottom: 10px; margin-right: 20px"
            v-for="region in regions[law] || []"
            :key="`region-${region.code}`"
          >
            <input
              class="wcc-wcc-form-check-input"
              type="radio"
              :id="`wcc-radio-region-${region.code}`"
              :value="region.code"
              v-model="banner.properties.config.selectedRegion.region"
              :checked="selectedRegion === region.code"
              :data-test-id="`wcc-radio-region-${region.code}`"
            />
            <label
              class="wcc-form-check-label"
              :for="`wcc-radio-region-${region.code}`"
            >
              {{ region.label }}
            </label>
          </div>
        </div>
      </div>
    </div>
  </fragment>
</template>
  
  <script>
import { Fragment } from "vue-frag";

export default {
  name: "BannerRegionSelector",
  components: {
    Fragment,
  },
  props: {
    law: {
      type: String,
      default: "gdpr",
    },
  },
  data() {
    return {
      regions: {
        gdpr: [
          {
            label: this.$i18n.__("Worldwide", "webtoffee-cookie-consent"),
            regions: [],
            code: "ALL",
          },
          {
            label: this.$i18n.__(
              "EU Countries & UK",
              "webtoffee-cookie-consent"
            ),
            regions: ["EU"],
            code: "EU",
          },
        ],
        ccpa: [
          {
            label: this.$i18n.__("Worldwide", "webtoffee-cookie-consent"),
            regions: [],
            code: "ALL",
          },
          {
            label: this.$i18n.__(
              "United States",
              "webtoffee-cookie-consent"
            ),
            regions: ["NA:US"],
            code: "US",
          },
        ],
      },
    };
  },
  methods: {},
  computed: {
    banner() {
      return this.$store.state.banners.current;
    },
    appliedLaw() {
      return this.banner.properties.settings.applicableLaw;
    },
    geoTargetHeading() {
      return this.$i18n.__(
        "Geo-target Banner",
        "webtoffee-cookie-consent"
      );
    },
    selectedRegion() {
      return this.banner.properties.config.selectedRegion.region;
    },
  },
};
</script>
  