import type { FC } from 'react';
import React, { useEffect } from 'react';
import cx from 'classnames';
import PageBody from './pageBody';
import PageCol from './pageCol';
import PageGrid from './pageGrid';
import PageHeader from './pageHeader';
import { PageModuleNav } from './pageModuleNav';
import PageNav from './pageNav';
import PageRow from './pageRow';
import PageSwitch from './pageSwitch';
import PageTitle from './pageTitle';
import PageToolbar from './pageToolbar';
import PageView from './pageView';
import type { PageNavItem } from './pageNav';

const CLASSNAME = 'Page';

interface Props {
    children?: React.ReactNode;
    className?: string;
    testId?: string;
    windowTitle?: string;
}

interface Page extends FC<Props> {
    Header: typeof PageHeader;
    Body: typeof PageBody;
    Nav: typeof PageNav;
    ModuleNav: typeof PageModuleNav;
    Switch: typeof PageSwitch;
    Title: typeof PageTitle;
    Row: typeof PageRow;
    Toolbar: typeof PageToolbar;
    View: typeof PageView;
    Grid: typeof PageGrid;
    Col: typeof PageCol;
}

/**
 * Page component is a wrapper around page content. It takes care of the page layout and comes with nested components that should be used to define the structure of the page content.
 *
 * @type template
 * @status live
 * @tags layout-structure
 *
 * @nested Header, Body, Nav, ModuleNav, Switch, Title, Row, Toolbar, View, Grid, Col
 */
const Page: Page = ({ children, className, testId, windowTitle }) => {
    useEffect(() => {
        if (windowTitle) window.document.title = windowTitle;
    }, [windowTitle]);

    return (
        <div className={cx(CLASSNAME, className)} data-testid={testId || CLASSNAME}>
            {children}
        </div>
    );
};

Page.Header = PageHeader;
Page.Body = PageBody;
Page.Nav = PageNav;
Page.ModuleNav = PageModuleNav;
Page.Switch = PageSwitch;
Page.Title = PageTitle;
Page.Row = PageRow;
Page.Toolbar = PageToolbar;
Page.View = PageView;
Page.Grid = PageGrid;
Page.Col = PageCol;

export type { PageNavItem };
export { Page };