<template>
    <fragment>
        <div class="wcc-mcm-container">
            <div class="wcc-mcm-header">
                <div class="wcc-row">
                    <div class="wcc-col-8">
                        <div class="wcc-row wcc-align-center">
                            <label class="wcc-col-label wcc-checkbox-mcm-title" for="wcc-checkbox-mcm-title"
                                style="font-weight: bold">
                                {{
                                    $i18n.__(
                                        "Microsoft Consent Mode",
                                        "webtoffee-cookie-consent"
                                    )
                                }}
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wcc-mcm-body">
                <div class="wcc-mcm-general-settings">
                    <div class="wcc-row">
                        <label class="wcc-mcm-label" for="wcc-radio-clarity-consent">
                            {{
                                $i18n.__(
                                    "Microsoft Clarity Consent Mode",
                                    "webtoffee-cookie-consent"
                                )
                            }}
                        </label>
                        <div class="wcc-mcm-toggle-container" style="display: flex; flex-direction: column; align-items: flex-start;">
                            <div class="wcc-clarity-consent-inner">
                                <base-popper :content="$i18n.__(
                                    'Please ensure that Clarity cookies are disabled in your Clarity project settings. This prevents cookies from being dropped before user consent is obtained and helps maintain full GDPR compliance.',
                                    'webtoffee-cookie-consent'
                                )
                                    " />
                                     <base-switch v-model="mccEnabled" name="mcc-toggle" />
                            </div>
                           
                        </div>
                    </div>
                    <div class="wcc-row">
                        <label class="wcc-col-12 wcc-mcc-help-label">
                            {{
                                $i18n.__(
                                    "Learn more about, ",
                                    "webtoffee-cookie-consent"
                                )
                            }}
                            <a href="https://www.webtoffee.com/docs/gdpr-plugin/set-up-microsoft-clarity-consent-mode/" target="_blank">
                                {{ $i18n.__("Clarity Consent Mode", "webtoffee-cookie-consent") }}
                            </a>   
                        </label> 
                    </div>
                    <div class="wcc-row">
                        <div class="wcc-section-separator wcc-col-12"></div>
                    </div>
                    <div class="wcc-row">
                        <label class="wcc-mcm-label" for="wcc-radio-uet-consent">
                            {{
                                $i18n.__(
                                    "Support Microsoft UET Consent Mode",
                                    "webtoffee-cookie-consent"
                                )
                            }}
                        </label>
                        <div class="wcc-mcm-toggle-container" style="display: flex; flex-direction: column; align-items: flex-start;">
                            <div class="wcc-uet-consent-inner">
                                <base-popper :content="$i18n.__(
                                    'Enables Microsoft Universal Event Tracking (UET) tag, which allows Microsoft Advertising to collect data from your website for ad targeting and conversion tracking.',
                                    'webtoffee-cookie-consent'
                                )
                                    " />
                                     <base-switch v-model="uetEnabled" name="uet-toggle" />
                            </div>
                           
                        </div>
                    </div>
                    <div class="wcc-row">
                        <label class="wcc-col-12 wcc-mcc-help-label ">
                            {{
                                $i18n.__(
                                    "Learn more about, ",
                                    "webtoffee-cookie-consent"
                                )
                            }}
                            <a href="https://www.webtoffee.com/docs/gdpr-plugin/configure-uet-consent-mode-for-microsoft-advertising/" target="_blank">
                                {{ $i18n.__("UET Consent Mode", "webtoffee-cookie-consent") }}
                            </a>   
                        </label> 
                    </div>
                    <div class="wcc-row">
                        <div class="wcc-section-separator wcc-col-12"></div>
                    </div>
                    <div class="wcc-row">
                        <label class="wcc-col-12 wcc-mcc-help-label" style="font-style: italic;">
                            {{
                                $i18n.__(
                                    "*With geo-targeting enabled, UET  & Clarity will automatically have 'granted' consent for users outside your targeted regions.",
                                    "webtoffee-cookie-consent"
                                )
                            }}
                            
                        </label> 
                    </div>
                </div>
            </div>
            <div class="wcc-mcm-footer">

            </div>
        </div>
    </fragment>
</template>

<script>
import { saveOptions } from "@/helpers/common";
import { Fragment } from "vue-frag";

export default {
    name: "mcm",
    components: {
        Fragment,
    },
    data() {
        return {
        };
    },

    methods: {
    },
    computed: {
        mccEnabled: {
            get() {
                return this.$store.state.settings.options.microsoft_clarity.status;
            },
            set(value) {
                this.$store.state.settings.options.microsoft_clarity.status = value;
                let data = {};
                data.status = value;
                this.setOption("microsoft_clarity", data);
                this.saveOptions();
            },
        },
        uetEnabled: {
            get() {
                return this.$store.state.settings.options.microsoft_uet.status;
            },
            set(value) {
                this.$store.state.settings.options.microsoft_uet.status = value;
                let data = {};
                data.status = value;
                this.setOption("microsoft_uet", data);
                this.saveOptions();
            },
        }

    },
};
</script>

<style lang="scss">
@include wrap-class() {
    .wcc-mcm-container {
        margin: -12px -20px;
        padding: 12px 20px;
        background-color: #f1f8fe;
        height: 780px;
    }

    .wcc-mcm-header {
        padding: 10px 0px;
    }

    .wcc-mcm-header .wcc-row {
        align-items: center;
    }

    .wcc-mcm-body {
        background-color: #fff;
        border-radius: 12px;
        height: 275px;
        .wcc-mcm-general-settings {
            padding: 20px;
        }
        .wcc-mcm-label {
            font-weight: 500;
            font-size: 14px;
            line-height: 16px;
            padding: 0px 15px;
        }
        .wcc-mcc-help-label {
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            padding: 0px 15px;
        }
        .wcc-section-separator {
            margin: 15px 15px 20px 15px;
            border-top: 1px solid #EAEBED;
        }
        .wcc-mcm-label {
            width: 20%;
        }
        .wcc-mcm-toggle-container {
            width: 80%;
        }
    }    
    .wcc-clarity-consent-inner, .wcc-uet-consent-inner {
        .wcc-popper-container {
            margin-right: 8px;
            vertical-align: auto;
        }
    }
}
</style>