<template>
  <div class="wcc-banner-layout-group">
    <div class="wcc-banner-layout-items">
      <div
        class="wcc-radio-group"
        v-for="position in properties.positions"
        :key="`${properties.type}-${position}`"
        :data-test-id="`wcc-banner-layout-${properties.type}-${position}`"
      >
        <Radio
          :id="`wcc-consent-type-${properties.type}-${position}`"
          :value="`${properties.type}-${position}`"
          :icon="`layouts/${properties.type}-${position}.svg`"
          v-model="selectedLayout"
          :disabled="disabled"
        />
        <h6 class="wcc-banner-layout-title">
          {{ formatPosition(position) }}
        </h6>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Radio from "@/components/elements/Radio.vue";

export default {
  name: "BannerLayoutItem",
  components: {
    Radio,
  },
  props: {
    properties: {
      type: Object,
      default() {
        return {};
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    banner() {
      return this.$store.state.banners.current;
    },
    selectedLayout: {
      get() {
        const type = this.banner.properties.settings.type;
        const position = this.banner.properties.settings.position;
        return `${type}-${position}`;
      },
      set(layout) {
        const [type, x, y] = layout.split("-");
        const position = y ? `${x}-${y}` : x;
        this.banner.properties.settings.type = type;
        this.banner.properties.settings.position = position;
      },
    },
  },
  methods: {
    formatPosition(position) {
      // Convert to lowercase and split by '-', then capitalize each part
      return position
        .toLowerCase()
        .split("-")
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ");
    },
  },
};
</script>
  