import PageBreadcrumbs from "@insite/content-library/Components/PageBreadcrumbs";
import Page from "@insite/mobius/Page";
import * as React from "react";
import { ReactNode } from "react";
import styled from "styled-components";

interface PageLayoutProps {
    showHeader: boolean;
    header: ReactNode;
    showCompactHeader: boolean;
    compactHeader: ReactNode;
    showBreadcrumbs: boolean;
    pageContent: ReactNode;
    showFooter: boolean;
    footer: ReactNode;
    showSignInOverlay?: boolean;
    signInOverlay?: ReactNode;
    showStorePickupOverlay?: boolean;
    storePickupOverlay?: ReactNode;
    showAddressBookOverlay?: boolean;
    addressBookOverlay?: ReactNode;
}

// This doesn't currently support HMR
const PageLayout = ({
    showHeader,
    header,
    showBreadcrumbs,
    pageContent,
    showFooter,
    footer,
    showCompactHeader,
    compactHeader,
    showSignInOverlay,
    signInOverlay,
    showStorePickupOverlay,
    storePickupOverlay,
    showAddressBookOverlay,
    addressBookOverlay,
}: PageLayoutProps) => {
    return (
        <PageLayoutWrapper>
            {showHeader && header}
            {showCompactHeader && compactHeader}
            {showBreadcrumbs && (
                <Page as="div">
                    <PageBreadcrumbs />
                </Page>
            )}
            {pageContent}
            {showFooter && footer}
            {showSignInOverlay && signInOverlay}
            {showStorePickupOverlay && storePickupOverlay}
            {showAddressBookOverlay && addressBookOverlay}
        </PageLayoutWrapper>
    );
};

const PageLayoutWrapper = styled.div`
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    > main {
        flex: 1 1 0%;
    }

    @media print {
        display: block;
    }
`;

export default PageLayout;
