<script lang="ts" setup>
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
import { enumPageComponentStaticChild } from "@/definitions/enum";

const props = defineProps<{
    records?: any[]
    component?: any;
}>();

const globalState = ref<any>({})
const setGlobalState = (id: any) => {
    globalState.value[id] = !globalState.value[id];
}
</script>

<template>
    <div class="navigation-container flex gap-4 justify-center items-center">
        <div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
            <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
                <div class="navigation-submenu">
                    <div class="navigation_title ">{{ record?.title }}</div>
                    <div class="navigation-item submenu-container dropdown-container">
                        <RecusiveNavItem :records="record.childs" />
                    </div>
                </div>
            </template>
            <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
                <div class="navigation-submenu">
                    <div class="position-relative ps-3">
                        <div class="navigation_title ">{{ record?.title }}</div>
                    </div>
                    <div class="full-layout dropdown-container">
                        <template v-if="record.data">
                            <div class="p-1">
                                <RecusiveSection type="section" :id="record.data" />
                            </div>
                        </template>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="navigation_title navigation-item" >{{ record?.title }}</div>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .navigation-branch {
        .navigation_title {
            font-size: 14px;
            font-weight: 400;
            text-align: left;
        }
        .navigation-submenu {
            position: relative;
            padding: 15px 5px;
            &:hover {
                > .dropdown-container {
                    opacity: 1;
                    transform: translate(-50%, 0%);
                    visibility: visible;
                }
            }
        }
        .submenu-container {
            width: 200px;
            display: flex;
            > div {
                justify-content: start !important;
                align-items: flex-start !important;
                flex-direction: column;
                width: 100%;
                gap: 0px !important;
            }
            div {
                width: 100% !important;
            }
            .navigation-item {
                width: 100% !important;
                padding: 10px 20px;
                &:hover {
                    background: #409eff;
                    color: #fff;
                }
            }
            .navigation-branch {
                padding: 0px !important;
            }
        }
        .dropdown-container {
            opacity: 0;
            transform: translate(-50%, 10%);
            left: 50%;
            visibility: hidden;
            transition: all .3s;
            position: absolute;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            top: 100%;
        }
        .full-layout {
            width: 1200px;
            z-index: 2;
        }

        .show-menu {
            opacity: 1;
            transform: translate(-50%, 0%);
            visibility: visible;
        }
    }
</style>