<template>
    <a-layout-sider
        :width="240"
        :style="{
            margin: '0 0 0 0',
            overflowY: 'auto',
            position: 'fixed',
            paddingTop: '8px',
            zIndex: 998,
        }"
        :trigger="null"
        :collapsed="menuCollapsed"
        :theme="appSetting.left_sidebar_theme"
        class="sidebar-right-border"
    >
        <div v-if="menuCollapsed" class="logo">
            <img
                :style="{
                    height: '32px',
                }"
                :src="
                    appSetting.left_sidebar_theme == 'dark'
                        ? appSetting.small_dark_logo_url
                        : appSetting.small_light_logo_url
                "
            />
        </div>
        <div v-else>
            <img
                :style="{
                    width: '150px',
                    height: '53px',
                    paddingLeft: appSetting.rtl ? '0px' : '30px',
                    paddingRight: appSetting.rtl ? '30px' : '0px',
                    paddingTop: '5px',
                    paddingBottom: '20px',
                    marginLeft: appSetting.rtl ? '0px' : '10px',
                    marginRight: appSetting.rtl ? '10px' : '0px',
                }"
                :src="
                    appSetting.left_sidebar_theme == 'dark'
                        ? appSetting.dark_logo_url
                        : appSetting.light_logo_url
                "
            />
            <CloseOutlined
                v-if="innerWidth <= 991"
                :style="{
                    marginLeft: appSetting.rtl ? '0px' : '45px',
                    marginRight: appSetting.rtl ? '45px' : '0px',
                    verticalAlign: 'super',
                    color: appSetting.left_sidebar_theme == 'dark' ? '#fff' : '#000000',
                }"
                @click="menuSelected"
            />
        </div>

        <div class="superadmin-scroll-container">
            <a-menu
                :theme="appSetting.left_sidebar_theme"
                :openKeys="openKeys"
                v-model:selectedKeys="selectedKeys"
                :mode="mode"
                @openChange="onOpenChange"
                :style="{ borderRight: 'none' }"
            >
                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({ name: 'superadmin.dashboard.index' });
                        }
                    "
                    key="dashboard"
                >
                    <HomeOutlined />
                    <span>{{ $t("menu.dashboard") }}</span>
                </a-menu-item>

                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({ name: 'superadmin.companies.index' });
                        }
                    "
                    key="companies"
                >
                    <ShopOutlined />
                    <span>{{ $t("menu.companies") }}</span>
                </a-menu-item>

                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({
                                name: 'superadmin.subscriptions.plans.index',
                            });
                        }
                    "
                    key="subscriptions"
                >
                    <DollarOutlined />
                    <span>{{ $t("menu.subscriptions") }}</span>
                </a-menu-item>

                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({
                                name: 'superadmin.payment_transactions.index',
                            });
                        }
                    "
                    key="payment_transactions"
                >
                    <CalculatorOutlined />
                    <span>{{ $t("menu.payment_transactions") }}</span>
                </a-menu-item>

                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({
                                name: 'superadmin.offline_requests.index',
                            });
                        }
                    "
                    key="offline_requests"
                >
                    <ShopOutlined />
                    <span>{{ $t("menu.offline_requests") }}</span>
                </a-menu-item>

                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({
                                name: 'superadmin.email-queries.index',
                            });
                        }
                    "
                    key="email_queries"
                >
                    <ContactsOutlined />
                    <span>{{ $t("menu.email_queries") }}</span>
                </a-menu-item>

                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({ name: 'superadmin.users.index' });
                        }
                    "
                    key="users"
                >
                    <TeamOutlined />
                    <span>{{ $t("menu.superadmins") }}</span>
                </a-menu-item>

                <!-- <a-menu-item
						@click="
							() => {
								menuSelected();
								$router.push({
									name: 'superadmin.payment_settings.paypal.index',
								});
							}
						"
						key="payment_settings"
					>
						<DollarOutlined />
						<span>{{ $t("menu.payment_settings") }}</span>
					</a-menu-item> -->

                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({
                                name: 'superadmin.website_settings.header.index',
                            });
                        }
                    "
                    key="website_settings"
                >
                    <GlobalOutlined />
                    <span>{{ $t("menu.website_settings") }}</span>
                </a-menu-item>

                <a-menu-item
                    @click="
                        () => {
                            menuSelected();
                            $router.push({
                                name: 'superadmin.settings.profile.index',
                            });
                        }
                    "
                    key="settings"
                >
                    <SettingOutlined />
                    <span>{{ $t("menu.settings") }}</span>
                </a-menu-item>

                <a-menu-item @click="logout" key="logout">
                    <LogoutOutlined />
                    <span>{{ $t("menu.logout") }}</span>
                </a-menu-item>
            </a-menu>
        </div>
    </a-layout-sider>
</template>

<script>
import { defineComponent, ref, watch, onMounted, computed } from "vue";
import { Layout } from "ant-design-vue";
import { useAuthStore } from "../../main/store/authStore";
import { useRoute } from "vue-router";
import {
    HomeOutlined,
    ShopOutlined,
    LogoutOutlined,
    CloseOutlined,
    SettingOutlined,
    TeamOutlined,
    DollarOutlined,
    GlobalOutlined,
    CalculatorOutlined,
    ContactsOutlined,
} from "@ant-design/icons-vue";
import common from "../../common/composable/common";
const { Sider } = Layout;

export default defineComponent({
    components: {
        Sider,
        Layout,

        HomeOutlined,
        ShopOutlined,
        LogoutOutlined,
        CloseOutlined,
        SettingOutlined,
        TeamOutlined,
        DollarOutlined,
        GlobalOutlined,
        CalculatorOutlined,
        ContactsOutlined,
    },
    setup(props, { emit }) {
        const { appSetting, user, permsArray, appModules, menuCollapsed } = common();
        const rootSubmenuKeys = [
            "dashboard",
            "companies",
            "subscriptions",
            "payment_transactions",
            "users",
            "payment_settings",
            "website_settings",
            "settings",
            "email_queries",
        ];
        const authStore = useAuthStore();
        const route = useRoute();

        const innerWidth = window.innerWidth;
        const openKeys = ref([]);
        const selectedKeys = ref([]);
        const mode = ref("inline");

        onMounted(() => {
            var menuKey =
                typeof route.meta.menuKey == "function"
                    ? route.meta.menuKey(route)
                    : route.meta.menuKey;

            if (route.meta.menuParent == "settings") {
                menuKey = "settings";
            } else if (route.meta.menuParent == "payment_settings") {
                menuKey = "payment_settings";
            } else if (route.meta.menuParent == "website_settings") {
                menuKey = "website_settings";
            } else if (route.meta.menuParent == "subscriptions") {
                menuKey = "subscriptions";
            }

            if (innerWidth <= 991) {
                openKeys.value = [];
            } else {
                openKeys.value = menuCollapsed.value ? [] : [route.meta.menuParent];
            }

            selectedKeys.value = [menuKey.replace("-", "_")];
        });

        const logout = () => {
            authStore.logoutAction();
        };

        const menuSelected = () => {
            if (innerWidth <= 991) {
                authStore.updateMenuCollapsed(true);
            }
        };

        const onOpenChange = (currentOpenKeys) => {
            const latestOpenKey = currentOpenKeys.find(
                (key) => openKeys.value.indexOf(key) === -1
            );

            if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                openKeys.value = currentOpenKeys;
            } else {
                openKeys.value = latestOpenKey ? [latestOpenKey] : [];
            }
        };

        watch(route, (newVal, oldVal) => {
            const menuKey =
                typeof newVal.meta.menuKey == "function"
                    ? newVal.meta.menuKey(newVal)
                    : newVal.meta.menuKey;

            if (innerWidth <= 991) {
                openKeys.value = [];
            } else {
                openKeys.value = [newVal.meta.menuParent];
            }

            if (newVal.meta.menuParent == "settings") {
                selectedKeys.value = ["settings"];
            } else if (newVal.meta.menuParent == "payment_settings") {
                selectedKeys.value = ["payment_settings"];
            } else if (newVal.meta.menuParent == "website_settings") {
                selectedKeys.value = ["website_settings"];
            } else if (newVal.meta.menuParent == "subscriptions") {
                selectedKeys.value = ["subscriptions"];
            } else {
                selectedKeys.value = [menuKey.replace("-", "_")];
            }
        });

        watch(
            () => menuCollapsed.value,
            (newVal, oldVal) => {
                const menuKey =
                    typeof route.meta.menuKey == "function"
                        ? route.meta.menuKey(route)
                        : route.meta.menuKey;

                if (innerWidth <= 991 && menuCollapsed.value) {
                    openKeys.value = [];
                } else {
                    openKeys.value = menuCollapsed.value ? [] : [route.meta.menuParent];
                }

                if (route.meta.menuParent == "settings") {
                    selectedKeys.value = ["settings"];
                } else {
                    selectedKeys.value = [menuKey.replace("-", "_")];
                }
            }
        );

        return {
            mode,
            selectedKeys,
            openKeys,
            logout,
            innerWidth: window.innerWidth,

            onOpenChange,
            menuSelected,
            menuCollapsed,
            appSetting,
            user,
            permsArray,
            appModules,
        };
    },
});
</script>

<style lang="less">
@media only screen and (max-width: 1150px) {
    .ant-layout-sider.ant-layout-sider-collapsed {
        left: -80px !important;
    }
}

/* Custom scrollbar */
.superadmin-scroll-container {
    overflow-y: auto;
    height: calc(100vh - 61px); /* Set height as needed */
}

.superadmin-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.superadmin-scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.superadmin-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}
</style>
