<template>
    <span v-if="loading"></span>
    <span class="wcc-consent-renew-notice-wrapper" v-else-if="renewConsentNotice">
        <notice type="warning" isDismissable isDismissableText="Dismiss" showIcon class="wcc-consent-renew-notice"
            @onDismiss="handleDismiss">
            <div class="wcc-align-center">
                <div class="wcc-consent-renew-notice">
                    <p class="wcc-notice-text">
                        {{
                            $i18n.__(
                                "You’ve updated cookie settings. To stay compliant, please renew user consent.",
                                "webtoffee-cookie-consent"
                        )
                        }}
                    </p>
                </div>
            </div>
        </notice>
    </span>
</template>

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

export default {
    name: "RenewNotice",
    components: { 
        Notice,
        BaseIcon,
     },
    data() {
        return {};
    },
    methods: {
        async handleDismiss() {
            try {
                // This will hide renew consent warning.
                this.updateConsentStatus(false);
                let renewData = {};
                renewData.status = false;
                this.setOption("renew_consent_notice", renewData);
                this.saveOptions();
            } catch (error) {
                console.log(error);
            }
        },
    },
    computed: {
        ...mapState("settings", ["info"]),
        renewConsentNotice() {
            return !!this.info.renew_consent_notice.status;
        },
        loading() {
            return this.info === false;
        },
    },
};
</script>

<style lang="scss" scoped></style>