<template>
  <div class="wcc-banner-layout-group">
    <div class="wcc-banner-layout-items">
      <div class="wcc-radio-group" :data-test-id="`wcc-preference-center-${position}`">
        <Radio
          :id="`wcc-preference-center-${position}`"
          :value="position"
          :icon="`layouts/preference-${position}.svg`"
          v-model="selectedPosition"
        />
        <h6 class="wcc-banner-layout-title">
          {{ formatPosition(position) }}
        </h6>
      </div>
    </div>
  </div>
</template>

<script>
import Radio from "@/components/elements/Radio.vue";

export default {
  name: "PreferenceCenterItem",
  components: {
    Radio,
  },
  props: {
    position: {
      type: String,
      required: true,
    },
  },
  computed: {
    banner() {
      return this.$store.state.banners.current;
    },
    selectedPosition: {
      get() {
        return this.banner.properties.settings.preferenceCenter;
      },
      set(position) {
        this.banner.properties.settings.preferenceCenter = 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(' ');
    },
  },
  watch: {
    banner: {
      handler(newBanner) {
        const layoutType = newBanner.properties.settings.type;
        if (layoutType === 'box' || layoutType === 'popup') {
          this.selectedPosition = 'center';
        } else if (layoutType === 'banner' && (this.selectedPosition !== 'center' && this.selectedPosition !== 'push-down')) {
          this.selectedPosition = 'center';
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>