<template>
  <span v-if="loading"></span>
  <span class="wcc-migration-notice-wrapper" v-else-if="legacyActivated && showNotice">
    <notice
      type="default"
      isDismissable
      style="margin-top: 20px; margin-bottom: 10px"
      @onDismiss="handleDismiss"
      class="wcc-activation-notice"
    >
      <div class="wcc-align-center">
        <div class="wcc-migration-notice">
          <h2>{{ $i18n.__("Heads up!", "webtoffee-cookie-consent") }}</h2>
          <p class="wcc-notice-text">
            {{
              $i18n.__(
                "Thank you for installing the new version of GDPR Cookie Consent plugin.",
                "webtoffee-cookie-consent"
              )
            }}
          </p>
          <p class="wcc-notice-text">
            {{
              $i18n.__(
                "Just so you know, this is a revamped version of the GDPR Cookie Consent plugin you have used in the past. While this brings many new functional and UI improvements, you will be required to configure the plugin as a new installation. Due to technical limitations, we won’t be able to migrate your old/existing configurations including user consent preferences to the new version.",
                "webtoffee-cookie-consent"
              )
            }}
          </p>
          <h4 class="wcc-notice-text"  style="padding-top: 12px">
            {{
              $i18n.__(
                " Rolling Back to Legacy Version:",
                "webtoffee-cookie-consent"
              )
            }}
          </h4>
          <p class="wcc-notice-text">
            {{
              $i18n.__(
                " If you encounter any issues or prefer to use the previous version, you can easily roll back:",
                "webtoffee-cookie-consent"
              )
            }}
          </p>
          <ul style="padding-left: 20px">
            <li>
              {{
                $i18n.__(
                  "Deactivate the new version",
                  "webtoffee-cookie-consent"
                )
              }}.
            </li>
            <li>
              {{
                $i18n.__(
                  "Reactivate the old plugin (legacy version).",
                  "webtoffee-cookie-consent"
                )
              }}
            </li>
          </ul>
          <p class="wcc-notice-text">
            {{
              $i18n.__(
                "All your configurations will be recovered.",
                "webtoffee-cookie-consent"
              )
            }}
          </p>
          <base-button class="wcc-button-primary" @click.native="handleDismiss">
            {{ $i18n.__("Got it", "webtoffee-cookie-consent") }}
          </base-button>
        </div>
      </div>
    </notice>
  </span>
</template>

<script>
import { mapState } from "vuex";
import Notice from "@/components/elements/Notice.vue";
import wccRest from "@/helpers/api";

export default {
  name: "MigrationNotice",
  components: { Notice },
  data() {
    return {
        showNotice: true,
    };
  },
  methods: {
    async handleDismiss() {
      try {
        // Update the option value to true
        await wccRest.post({
          path: `/settings/dismissnotice`,
        });
        this.showNotice=false;
      } catch (error) {
        console.log(error);
      }
    },
  },
  computed: {
    ...mapState("settings", ["info"]),
    legacyActivated() {
      return !!this.info.migration_notice.status;
    },
    loading() {
      return this.info === false;
    },
  },
};
</script>

<style lang="scss" scoped>
.wcc-migration-notice-wrapper {
  width: calc(100% - 160px);
  height: calc(100vh - 32px);
  background-color: rgba(51, 51, 51, 0.75);
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 32px;
  left: 160px;
  z-index: 99999999;
}
.wcc-migration-notice-wrapper .wcc-admin-notice {
  background: #fff;
  border: 1px solid #ccd0d4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
  padding: 20px 0px 20px 20px;
  width: 70%;

}
.wcc-migration-notice-wrapper .wcc-admin-notice .wcc-admin-notice-content .wcc-notice-text {
  font-size: 15px;
}
.wcc-migration-notice-wrapper .wcc-admin-notice .wcc-admin-notice-content .wcc-button-primary {
  float: right;
}
.wcc-activation-notice .notice-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
</style>