<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';

import ZoneLocationsTree from './ZoneLocationsTree.vue';

import axios from 'axios';

const { t } = useI18n();
const route = useRoute();

const onSelected = async (val, node) => {
    if (val === null) val = undefined;
    const params = { geoId: node.id, isIncluded: val };
    await axios.post(`Zones/${route.params.id}/toggleIsIncluded`, params);
};
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <QCard class="full-width q-pa-md" style="max-width: 800px">
            <ZoneLocationsTree :root-label="t('zoneLocations.locations')">
                <template #content="{ node }">
                    <span v-if="!node.id">{{ node.name }}</span>
                    <QCheckbox
                        v-if="node.id"
                        v-model="node.selected"
                        :label="node.name"
                        @update:model-value="($event) => onSelected($event, node)"
                        toggle-indeterminate
                        color="transparent"
                        :class="[
                            'checkbox',
                            node.selected
                                ? '--checked'
                                : node.selected == false
                                ? '--unchecked'
                                : '--indeterminate',
                        ]"
                    />
                </template>
            </ZoneLocationsTree>
        </QCard>
    </QPage>
</template>

<style lang="scss">
.checkbox {
    &.--checked {
        .q-checkbox__bg {
            border: 1px solid $info !important;
        }
        .q-checkbox__svg {
            color: white !important;
            background-color: $info !important;
        }
    }

    &.--unchecked {
        .q-checkbox__bg {
            border: 1px solid $negative !important;
        }
        .q-checkbox__svg {
            background-color: $negative !important;
        }
    }

    &.--indeterminate {
        .q-checkbox__bg {
            border: 1px solid $white !important;
        }
        .q-checkbox__svg {
            color: transparent !important;
        }
    }
}
</style>