import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo, useEffect, useRef, useState } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import Flex from '../Flex';
import Grid from '../Grid';
import Text from '../Text';
import SummaryItem from '../SummaryItem';
import Icon from '../Icon';
import Breadcrumbs from '../Breadcrumbs';
import { useBreakpoint, useConfiguration, useConsolidatedRef, useI18n } from '../../hooks';
import { focusHeadingOrContainer } from '../../utils';
import Tabs, { TabPanel } from '../Tabs';
import { StyledPageHeader, StyledPageLayout, StyledPageIcon, StyledRegion } from './PageTemplates';
export const StyledFilterRegion = styled(StyledRegion) ``;
StyledFilterRegion.defaultProps = defaultThemeProp;
export const StyledDashboardRegion = styled(StyledRegion) `
  overflow: auto;
`;
StyledDashboardRegion.defaultProps = defaultThemeProp;
export const StyledDashboardPageLayout = styled(StyledPageLayout)(({ fitToViewport }) => {
    const height = 'calc(100vh - var(--appshell-offset, 0rem))';
    return css `
    min-height: ${height};
    ${fitToViewport &&
        css `
      height: ${height};
    `}

    [role='tabpanel'] & {
      padding: 0;
    }
  `;
});
StyledDashboardPageLayout.defaultProps = defaultThemeProp;
const DashboardPageLayout = forwardRef(function DashboardPageLayout({ regions, regionFullWidth, cols = `repeat(${regions.length}, minmax(0, 1fr))`, filters, filterPosition = 'block-start', fitToViewport = false, title, icon, actions, banners, path, as, utilities, ...restProps }, ref) {
    const pageRef = useConsolidatedRef(ref);
    const { loadedRef } = useConfiguration();
    const isMediumOrAbove = useBreakpoint('md');
    useEffect(() => {
        if (!pageRef.current)
            return;
        if (loadedRef.current) {
            focusHeadingOrContainer(pageRef.current, title);
        }
        else {
            loadedRef.current = true;
        }
    }, [title]);
    const headerArea = useMemo(() => {
        if (filterPosition === 'block-start' || !filters || Object.keys(filters).length === 0) {
            return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;
        }
        return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;
    }, [filterPosition, filters, regions.length]);
    const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;
    const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;
    const regionArea = useMemo(() => {
        if (filters && Object.keys(filters).length !== 0) {
            if (filterPosition === 'inline-start') {
                return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;
            }
            if (filterPosition === 'inline-end') {
                return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')} filter'`;
            }
        }
        return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;
    }, [filterPosition, filters, regions.length]);
    const regionFullWidthArea = useMemo(() => {
        if (filters && Object.keys(filters).length !== 0) {
            if (filterPosition === 'inline-start') {
                return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;
            }
            if (filterPosition === 'inline-end') {
                return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')} filter'`;
            }
        }
        return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;
    }, [filterPosition, filters, regions.length]);
    const renderFilters = filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0;
    const renderHeader = !!path || !!icon || !!title || !!actions;
    const renderBanners = !!banners;
    const gridAreas = useMemo(() => {
        if (renderFilters && renderBanners && renderHeader) {
            return `${headerArea}\n${bannerArea}\n${filterArea}\n${regionArea}\n${regionFullWidthArea}`;
        }
        if (renderFilters && renderBanners) {
            return `\n${bannerArea}\n${filterArea}\n${regionArea}\n${regionFullWidthArea}`;
        }
        if (renderFilters && renderHeader) {
            return `${headerArea}\n${filterArea}\n${regionArea}\n${regionFullWidthArea}`;
        }
        if (renderBanners && renderHeader) {
            return `${headerArea}\n${bannerArea}\n${regionArea}\n${regionFullWidthArea}`;
        }
        if (renderFilters) {
            return `\n${filterArea}\n${regionArea}\n${regionFullWidthArea}`;
        }
        if (renderBanners) {
            return `${bannerArea}\n${regionArea}\n${regionFullWidthArea}`;
        }
        if (renderHeader) {
            return `${headerArea}\n${regionArea}\n${regionFullWidthArea}`;
        }
        return `${regionArea}\n${regionFullWidthArea}`;
    }, [filterPosition, filters, banners, renderHeader, renderFilters, renderBanners]);
    const pageRows = useMemo(() => {
        if (fitToViewport) {
            if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {
                return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';
            }
            return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';
        }
        return 'fit-content(100%)';
    }, [filterPosition, banners]);
    if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {
        cols = '1fr 2fr 2fr';
    }
    if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {
        cols = '2fr 2fr 1fr';
    }
    return (_jsxs(Grid, { ...restProps, as: StyledDashboardPageLayout, forwardedAs: as, fitToViewport: fitToViewport, container: {
            autoRows: 'max-content',
            cols: '1fr',
            gap: 2,
            pad: 2
        }, md: {
            container: {
                areas: gridAreas,
                rows: pageRows,
                cols
            }
        }, ref: pageRef, children: [renderHeader && (isMediumOrAbove || (!isMediumOrAbove && !utilities)) && (_jsxs(Grid, { as: StyledPageHeader, md: { item: { area: 'header' } }, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })] })), banners && _jsx(Grid, { md: { item: { area: 'banner' } }, children: banners }), filters && Object.keys(filters).length !== 0 && (_jsx(Grid, { as: StyledFilterRegion, container: {
                    autoRows: 'max-content',
                    gap: 2
                }, md: {
                    container: {
                        cols: filterPosition === 'block-start'
                            ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'
                            : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'
                    },
                    item: { area: 'filter' }
                }, children: filters })), regions.map((colItems, i) => {
                const key = `${i}`;
                return (_jsx(Flex, { container: {
                        direction: 'column',
                        justify: 'start',
                        gap: 2
                    }, as: StyledDashboardRegion, children: colItems }, key));
            }), regionFullWidth.map((colItems, i) => {
                const key = `${i}`;
                return (_jsx(Grid, { container: {
                        cols: 'minmax(0, 1fr)',
                        alignItems: 'start',
                        gap: 2
                    }, md: { item: { area: 'col-full-width' } }, as: StyledDashboardRegion, children: colItems }, key));
            })] }));
});
const StylePageTabContent = styled.div(({ theme }) => {
    return css `
    padding: calc(2 * ${theme.base.spacing});
    ${StyledDashboardPageLayout} {
      padding: 0;
      min-height: unset;
      height: unset;
    }
  `;
});
StylePageTabContent.defaultProps = defaultThemeProp;
const DashboardPage = forwardRef(function DashboardPage({ a, b, c, filters, fitToViewport, utilities, path, icon, title, actions, ...restProps }, ref) {
    const isMediumOrAbove = useBreakpoint('md');
    const [panel, setPanel] = useState('content');
    const pageTabsRef = useRef(null);
    const t = useI18n();
    const pageContent = (_jsx(DashboardPageLayout, { ...restProps, cols: '1fr 1fr', filters: filters, fitToViewport: fitToViewport, regions: [a, b], regionFullWidth: [c], utilities: utilities, path: path, icon: icon, title: title, actions: actions, ref: ref }));
    const pageTabs = [
        { name: t('content'), id: 'content', content: pageContent },
        {
            name: t('coach', ['Pega GenAI™']),
            id: 'coach',
            content: utilities
        }
    ];
    const handleTabChange = (id) => {
        setPanel(id);
    };
    if (utilities) {
        if (isMediumOrAbove) {
            return (_jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Flex, { item: { grow: 1 }, children: pageContent }), _jsx("div", { children: utilities })] }));
        }
        return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 2, undefined] }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions }), _jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef })] }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(StylePageTabContent, { children: tab.content }) }, tab.id)))] }));
    }
    return pageContent;
});
export default DashboardPage;
//# sourceMappingURL=DashboardPage.js.map