<template>
  <fragment>
    <ul class="wcc-banner-layout-list">
      <li class="wcc-banner-layout-item">
        <h2>
          {{ $i18n.__("Cookie Notice", "webtoffee-cookie-consent") }}
        </h2>
        <div class="wcc-banner-layout-wrap">
          <div class="wcc-button-group">
            <button
              v-for="layout in layouts"
              :key="layout.type"
              :class="[
                'wcc-layout-type-button',
                { selected: layout.type === selectedLayoutType },
              ]"
              @click="selectLayoutType(layout.type)"
              :data-test-id="`wcc-layout-type-${layout.type}`"
            >
              {{ layout.title }}
            </button>
          </div>
          <div class="wcc-banner-layout-container">
            <banner-layout-item
              v-if="selectedLayoutType"
              :key="selectedLayoutType"
              :properties="getLayoutProperties(selectedLayoutType)"
            />
          </div>
        </div>
      </li>
      <li class="wcc-banner-layout-item">
        <div class="wcc-preference-title">
          <h2>
            {{ $i18n.__("Preference Center", "webtoffee-cookie-consent") }}
          </h2>
          <base-popper
            :content="
              $i18n.__(
                'Determines the position of the Customize consent Preferences dialogue box when clicked on the Customize button in the consent banner.',
                'webtoffee-cookie-consent'
              )
            "
          />
        </div>
        <div class="wcc-banner-layout-wrap">
          <div class="wcc-preference-layout-container">
            <preference-center-item
              v-for="position in preferenceCenterLayouts"
              :key="position"
              :position="position"
            />
          </div>
        </div>
      </li>
    </ul>
  </fragment>
</template>
  
  
  <script>
import { Fragment } from "vue-frag";
import BannerLayoutItem from "@/modules/banners/components/BannerLayoutItem.vue";
import PreferenceCenterItem from "@/modules/banners/components/PreferenceCenterItem.vue";
import banners from "@/modules/banners/helpers/utils";
import { mapState } from "vuex";

export default {
  name: "BannerType",
  components: {
    Fragment,
    BannerLayoutItem,
    PreferenceCenterItem,
  },
  data() {
    return {
      selectedLayoutType: "",
    };
  },
  computed: {
    banner() {
      return this.$store.state.banners.current;
    },
    layouts() {
      let layouts = banners.getLayouts();
      const law = this.banner.properties.settings.applicableLaw;
      if (law === "ccpa") {
        layouts = layouts.filter(
          (element) => element.type === "banner" || element.type === "box"
        );
      }
      return layouts;
    },
    preferenceCenterLayouts() {
      const selectedLayout = this.getLayoutProperties(this.selectedLayoutType);
      if (selectedLayout) {
        const law = this.banner.properties.settings.applicableLaw;
        if (law === "ccpa") {
          return selectedLayout.preferenceCenter.filter(center => center === 'center');
        }
        return selectedLayout.preferenceCenter;
      }
      return [];
    },
    ...mapState("settings", ["info"]),
    loading() {
      return !Object.prototype.hasOwnProperty.call(this.info, "plan");
    },
  },
  methods: {
    getLayoutProperties(type) {
      return this.layouts.find((layout) => layout.type === type) || {};
    },
    selectLayoutType(type, reload = false) {
      this.selectedLayoutType = type;
      const layout = this.getLayoutProperties(type);
      if (layout) {
        this.banner.properties.settings.type =
          this.banner.properties.settings.type = reload
            ? this.banner.properties.settings.type
            : layout.type;
        this.banner.properties.settings.position = reload
          ? this.banner.properties.settings.position
          : layout.default;
      }
    },
  },
  watch: {
    "banner.properties.settings.applicableLaw": function () {
      // Update the selected layout type based on the new applicable law
      // Set the default selected layout type
      const defaultType =
        this.banner.properties.settings.type ||
        (this.layouts.length > 0 ? this.layouts[0].type : "");
      this.selectLayoutType(defaultType, true);
    },
  },
  created() {
    // Set the default selected layout type
    const defaultType =
      this.banner.properties.settings.type ||
      (this.layouts.length > 0 ? this.layouts[0].type : "");
    this.selectLayoutType(defaultType, true);
  },
};
</script>
  
<style lang="scss">
.wcc-section-layout .wcc-banner-layout-list {
  list-style-type: none;
  list-style: auto;
  padding: 0;
  li::marker {
    font-size: 16px;
    font-weight: 600;
  }
  .wcc-banner-layout-item {
    margin-bottom: 20px;
    .wcc-preference-title {
      display: flex;
      align-items: center; /* Vertically align items */
    }
    h2 {
      margin-bottom: 10px;
      font-size: 16px;
    }
    .wcc-banner-layout-title {
      font-size: 14px;
      font-weight: 450;
    }
    .wcc-banner-layout-wrap {
      display: block; /* Changed from flex to block */
      margin-bottom: 10px; /* Optional: Add margin-bottom for spacing between containers */

      .wcc-button-group {
        display: flex;
        margin-bottom: 15px;
        .wcc-layout-type-button {
          width: auto;
          height: 32px;
          gap: 0px;
          color: #555e6b;
          font-size: 14px;
          line-height: 16px;
          text-align: left;
          border-radius: 19px;
          background: none;
          cursor: pointer;
          padding: 8px 18px 8px 18px;
          border: 1px solid #eaebed;
          box-shadow: 0px 4px 12px 0px #55657d14;
          margin-right: 10px;
          &.selected {
            background: #f1f8fe;
            color: #056be7;
            border: 1px solid #cce3ff;
          }
        }
      }
      .wcc-banner-layout-items,
      .wcc-preference-layout-container {
        display: flex;
        .wcc-radio-group {
          margin-right: 25px;
        }
      }
      .wcc-image-radio img {
        width: 100px;
      }
      .wcc-image-radio:hover {
        cursor: pointer;
      }
      .wcc-radio-icon {
        position: relative;
      }
      .wcc-radio.wcc-image-radio.checked .wcc-radio-icon:before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        position: absolute;
        bottom: 3px;
        right: 3px;
        background: url("~@/assets/check-circle.svg");
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
