<template>
    <div class="wcc-law-selector">
        <div class="wcc-law-selector-header">
            <label class="wcc-label">{{ $i18n.__("Consent Law", "webtoffee-cookie-consent") }}</label>
            <div class="wcc-loader-views" v-if="saving">
                <p class="wcc-loading-text">
                    <loader />
                    {{ $i18n.__("Saving...", "webtoffee-cookie-consent") }}
                </p>
            </div>
            <div class="wcc-applicable-laws" v-else>
                <template>
                    <label v-for="(law, index) in laws" :key="index" style="margin-right: 30px;" :data-test-id="'wcc-checkbox-selected-law-' + law">
                        <div class="wcc-law-selection-checkbox" style="position: relative;">
                            <input type="checkbox" :id="'wcc-checkbox-selected-law-' + law" v-model="selectedLaws" :value="law" @change="handleCheckboxChange(law)">
                            {{ changeBannerName(law) }}
                            <div class="wcc-warning-message-main" v-if="shouldShowWarning(law)">
                                <div class="wcc-icon-container">
                                    <base-icon class="wcc-warning-icon" icon="info" color="#962627" />
                                </div>
                                <div class="wcc-warning-message">
                                    {{$i18n.__("At least one law must be selected", "webtoffee-cookie-consent") }}
                                </div>
                            </div>
                         </div>
                    </label>
                </template>
            </div>
        </div>
        <div class="wcc-row wcc-law-selector-show-more" :data-test-id="'wcc-law-selector-show-more'">
            <div class="wcc-col-12">
                <accordion class="wcc-app-accordion-no-border wcc-app-accordion-advanced" name="wcc-law-selector">
                    <accordion-item class="wcc-app-accordion-item">
                        <template slot="accordion-trigger">
                            <label class="wcc-label wcc-app-accordion-title wcc-show-support-laws-title"
                                @click="toggleAdvanced" :data-test-id="'wcc-show-support-laws-toggle'">
                                <template v-if="toggleSettings">{{
                                    $i18n.__("Show less", "webtoffee-cookie-consent")
                                }}</template>
                                <template v-else>{{
                                    $i18n.__("Show supported privacy laws", "webtoffee-cookie-consent")
                                }}</template>
                            </label>
                        </template>
                        <template slot="accordion-content">
                            <div class="wcc-app-box">
                                <supported-laws />
                                <template slot="accordion-trigger">
                                    <label class="wcc-label wcc-app-accordion-title wcc-show-support-laws-title"
                                        @click="toggleAdvanced">
                                        <template v-if="toggleSettings === false">{{
                                            $i18n.__("Hide advanced settings", "webtoffee-cookie-consent")
                                        }}</template>
                                    </label>
                                </template>
                            </div>
                        </template>
                    </accordion-item>
                </accordion>
            </div>
        </div>
    </div>
</template>
<script>
import banners from "@/modules/banners/helpers/utils";
import Accordion from "@/components/accordion/Accordion.vue";
import AccordionItem from "@/components/accordion/AccordionItem.vue";
import SupportedLaws from "@/modules/banners/components/SupportedLaws.vue";
import BaseIcon from "@/components/icons/BaseIcon.vue";
import Loader from "@/components/elements/Loader.vue";

export default {
    name: "LawSelector",
    components: {
        Accordion,
        AccordionItem,
        SupportedLaws,
        BaseIcon,
        Loader
    },
    data() {
        return {
            toggleSettings: false,
            laws: ["GDPR", "CCPA"],
            showWarning: {},
            saving: false,
        };
    },
    methods: {
        async changeBanner(id) {
            banners.toggleBanner(id);
        },
        getBannerName(banner) {
            if (banner.id === 2) {
                return "US State Laws";
            }
            return banner.name;
        },
        changeBannerName(banner) {
            if (banner === 'CCPA') {
                return "US State Laws";
            }
            return banner;
        },
        toggleAdvanced() {
            this.toggleSettings = !this.toggleSettings;
        },
        async handleCheckboxChange(changedLaw) {
            this.saving = true;
            
            // If no laws are selected, show warning and prevent the change
            if (this.selectedLaws.length === 0) {
                this.showWarning[changedLaw] = true;
                // Re-add the law that was just unchecked
                this.selectedLaws = [changedLaw];
                setTimeout(() => {
                    this.showWarning[changedLaw] = false;
                    // Force reactivity update
                    this.showWarning = { ...this.showWarning };
                }, 1500);
            } else {
                this.showWarning[changedLaw] = false;
            }
            
            let data = {};
            data.selected = this.selectedLaws;
            this.setOption("banners", data);
            await this.saveOptions(); // Wait for save to complete
            const selectedLaw = this.selectedLaws;
            if (selectedLaw.length === 1) {
                const activeBanner = this.$store.state.banners.items.find(
                    (banner) => banner.properties.settings.applicableLaw === selectedLaw[0].toLowerCase()
                );
                this.$store.state.banners.current = activeBanner;
            }
            this.saving = false;
        },
        shouldShowWarning(law) {
            return this.showWarning[law];
        },
    },
    computed: {
        banner() {
            return this.$store.state.banners.current;
        },
        banners() {
            return this.$store.state.banners.items || {};
        },
        appliedLaw() {
            return this.banner.properties.settings.applicableLaw;
        },
        cookieGroups() {
            return this.$store.state.cookies.items;
        },
        language() {
            return (
                (this.$store.state.languages.default &&
                    this.$store.state.languages.default) ||
                "en"
            );
        },
        selectedLaws: {
            get() {
                return this.$store.state.settings.options.banners.selected;
            },
            set(value) {
                // Allow the change to happen so we can show warning
                this.$store.state.settings.options.banners.selected = value;
            },
        },
    },
};
</script>
<style lang="scss" scoped>
@include wrap-class() {
    .wcc-law-selector-header {
        display: flex;
        justify-content: space-between;
        width: 370px;
        align-items: center;
        padding-left: 12px;
        position: relative;

        .wcc-dropdown-content {
            min-width: 188px;

            a {
                color: #23282d;
            }

            right: 0;
            width: auto;
        }

        .wcc-label {
            font-weight: 500;
        }

        .wcc-dropdown {
            .wcc-dropdown-anchor {
                background-color: transparent;
                border: none;
            }
        }

        .wcc-popper {
            width: 200px;
        }

        .wcc-popper-container {
            margin-left: 0px;
            width: 100%;
        }
    }

    .wcc-law-selector-show-more {
        padding-left: 12px;
        font-size: 14px;
        padding-top: 12px;
    }

    .wcc-show-support-laws-title {
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 6px;
        cursor: pointer;
        margin: 0;
        color: #1863dc;
        display: flex;
        align-items: center;
        font-weight: 500;
        background-color: transparent;
    }
    .wcc-warning-message-icon,.wcc-warning-message{
        display: inline-block;
    }
    .wcc-warning-message-main {
        display: flex;
        align-items: center; 
        margin-bottom: 10px; 
        position: absolute; 
        top: 26px; 
        left: 0; 
        z-index: 999;
        background-color: #fff;
        width: 250px;
        padding: 6px;
        border-radius: 9px;
        box-shadow: 0px 2px 9px 0px #6A7A8C40;
        height: 42px;
    }
    .wcc-icon-container {
        margin: 0px 4px; /* Adjust as needed */
    }
    .wcc-warning-message{
        font-size: 12px;
        text-transform: none;
    }
    .wcc-warning-message-main::before {
        content: '';
        position: absolute;
        left: 6px; /* Adjust as needed to position the triangle correctly */
        border-width: 6px; /* Adjust the size of the triangle */
        border-style: solid;
        border-color: transparent transparent transparent #FFF; /* Adjust the color to match your design */
        transform: rotate(270deg);
        top: -12px;
    }
    .wcc-law-selector{
        padding-left: 15px;
    }
}</style>