'use server';
import { FC } from "react";
import { joinPageUrlFromLayersArray, retrieveLayersOfUrlFromParams } from "@/lib/menuGet";
import { dynamicPagesIndex } from "@/languages/custom";
import { dynamicPageMenuWithLayersGet, dynamicRetrieveMenuFlattenGet, langDynamicPagesGet, langGet } from "@/lib/langGet";
import { DashboardLayoutProps, ModeTypes } from "@/validations/mutual/dashboard/props";

import HeaderComponent from "@/components/custom/header/component";
import MenuComponent from "@/components/custom/menu/component";
import ContentComponent from "@/components/custom/content/component";
import FooterComponent from "@/components/custom/footer/component";

const DashboardLayout: FC<DashboardLayoutProps> = async ({ params, searchParams, lang }) => {
    const layersItems = retrieveLayersOfUrlFromParams(params.page);
    const activePageUrl = joinPageUrlFromLayersArray(layersItems.data);
    const mode = (searchParams?.mode as ModeTypes) || 'shortList';

    const menuItems = await dynamicPageMenuWithLayersGet(lang);
    const translations = langGet(lang, langDynamicPagesGet(activePageUrl, dynamicPagesIndex));
    const menuTranslationsFlatten = dynamicRetrieveMenuFlattenGet(menuItems);

    const headerProps = { translations: translations.header, lang, activePageUrl }
    const menuProps = { lang, activePageUrl, menuTranslationsFlatten, menuItems }
    const contentProps = { translations: translations.content, lang, activePageUrl, mode, isMulti: true }

    return (
        <div className="flex flex-col min-w-screen">
            <HeaderComponent {...headerProps} />
            <MenuComponent {...menuProps} />
            <ContentComponent {...contentProps} />
            <FooterComponent translations={translations.footer} />
        </div>
    );
}

export { DashboardLayout };