<template>
    <router-view v-slot="{ Component }">
        lastFocusedInputGroupName: {{ lastFocusedInputGroupName }}
        <transition
            :duration="{ enter: 200, leave: 200 }"
            name="route-fade"
            mode="out-in">
            <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
            <component :is="Component" @focusin="handleChildFocus" />
        </transition>
    </router-view>
</template>

<script>
// TODO KO glass-part-question has nested button questions
// TODO KO selectedValues - make consistent for checkbox and radio if possible
export default {
    name: "app",
    data() {
        return {
            lastFocusedInputGroupName: "",
            onFocusCallback: null,
        };
    },
    methods: {
        handleChildFocus(e) {
            const targetType = e.target.type;
            // console.log(targetType)
            if (targetType !== "radio" && targetType !== "checkbox") {
                this.handleInputFocus({
                    groupName: null,
                });
            }
        },
        handleInputFocus(e) {
            // console.log("app handleInputFocus: ", {
            //     lastFocusedInputGroupName: this.lastFocusedInputGroupName,
            //     groupName: e.groupName,
            // })
            if (
                e &&
                this.lastFocusedInputGroupName !== e.groupName &&
                this.onFocusCallback
            ) {
                this.onFocusCallback();
            }
        },
        handleInputBlur(e) {
            // console.log("app handleInputBlur: ", {
            //     groupName: e.groupName,
            // })
            if (e) {
                this.lastFocusedInputGroupName = e.groupName;
                this.onFocusCallback = e.onFocusCallback;
            }
        },
    },
    watch: {
        $route: {
            handler() {
                this.lastFocusedInputGroup = null;
            },
        },
    },
};
</script>

<style lang="scss">
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
</style>
