import { emptyGuid } from "@insite/client-framework/Common/StringHelpers";
import Clickable from "@insite/mobius/Clickable";
import Icon from "@insite/mobius/Icon";
import Maximize from "@insite/mobius/Icons/Maximize2";
import Menu from "@insite/mobius/Icons/Menu";
import Minimize from "@insite/mobius/Icons/Minimize2";
import Toaster from "@insite/mobius/Toast/Toaster";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import injectCss from "@insite/mobius/utilities/injectCss";
import ErrorModal from "@insite/shell/Components/Modals/ErrorModal";
import LogoutWarningModal from "@insite/shell/Components/Modals/LogoutWarningModal";
import PageEditor from "@insite/shell/Components/PageEditor/PageEditor";
import PageTreeSideBar from "@insite/shell/Components/PageTree/PageTreeSideBar";
import { HasRouter, withRouter } from "@insite/shell/Components/RouterContext";
import SharedContentSideBar from "@insite/shell/Components/SharedContent/SharedContentSideBar";
import CompleteVersionHistoryModal from "@insite/shell/Components/Shell/CompleteVersionHistoryModal";
import ImportExportModal from "@insite/shell/Components/Shell/ImportExportModal";
import MainHeader from "@insite/shell/Components/Shell/MainHeader";
import MainNavigation from "@insite/shell/Components/Shell/MainNavigation";
import PublishComparer from "@insite/shell/Components/Shell/PublishComparer";
import RestoreContentModal from "@insite/shell/Components/Shell/RestoreContentModal";
import StyleGuideEditor from "@insite/shell/Components/Shell/StyleGuide/StyleGuideEditor";
import StyleGuidePreview from "@insite/shell/Components/Shell/StyleGuide/StyleGuidePreview";
import TopNavigationBar from "@insite/shell/Components/Shell/TopNavigationBar";
import { ShellThemeProps } from "@insite/shell/ShellTheme";
import { isSharedContentOpened } from "@insite/shell/Store/Data/Pages/PagesHelpers";
import ShellState from "@insite/shell/Store/ShellState";
import React, { useState } from "react";
import { useEffect } from "react";
import { connect } from "react-redux";
import { Route, Routes } from "react-router-dom";
import styled, { css } from "styled-components";

const homePageLoader = (props: ReturnType<typeof mapStateToProps> & HasRouter) => {
    useEffect(() => {
        if (isSharedContentOpened(props.router.location)) {
            return;
        }

        if (props.homePageId !== emptyGuid) {
            props.router.navigate(`/ContentAdmin/Page/${props.homePageId}`);
        }
    });

    return null;
};

const mapStateToProps = (state: ShellState) => ({
    homePageId: state.shellContext.mobileCmsModeActive
        ? state.shellContext.mobileHomePageId
        : state.shellContext.homePageId,
});

const HomePageLoader = connect(mapStateToProps)(withRouter(homePageLoader));

const FlexWrapper = styled.div`
    display: flex;
    height: 100%;
    background-color: ${(props: ShellThemeProps) => props.theme.colors.common.background};

    .mdc-tab-scroller__scroll-area {
        overflow: hidden;
    }
`;

const SideBarArea = styled.div<{ isCollapsed: boolean }>`
    padding-top: 40px;
    width: ${(props: ShellThemeProps & { isCollapsed: boolean }) =>
        props.isCollapsed ? "51px" : props.theme.sideBarWidth};
    overflow: hidden;
    position: relative;
    border-right: 1px solid #dedede;
    transition: 300ms ease-in-out;
`;

const MainArea = styled.div<{ isSideBarCollapsed: boolean }>`
    width: calc(
        100% -
            ${(props: ShellThemeProps & { isSideBarCollapsed: boolean }) =>
                props.isSideBarCollapsed ? "51px" : props.theme.sideBarWidth}
    );
    padding-top: 39px;
`;

const SideBarCollapserArea = styled.div`
    height: 40px;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #dedede;
    background-color: #f8f9fa;
`;

const collapserClickableStyles = css`
    padding: 8px 13px;
    &:focus {
        outline: none;
    }
`;

const CollapsedArea = styled.div`
    height: calc(100vh - 80px);
    overflow: hidden;
    position: relative;
`;

const Layout = () => {
    const [isCollapsed, setIsCollapsed] = useState(false);

    return (
        <FlexWrapper>
            <Toaster>
                <TopNavigationBar />
                <SideBarArea isCollapsed={isCollapsed}>
                    {isCollapsed ? (
                        <CollapsedArea>
                            <Clickable onClick={() => setIsCollapsed(!isCollapsed)} css={collapserClickableStyles}>
                                <Icon src={Menu} />
                            </Clickable>
                        </CollapsedArea>
                    ) : (
                        <>
                            <MainNavigation />
                            <Routes>
                                <Route path="/ContentAdmin/Design/StyleGuide" element={<StyleGuideEditor />} />
                                <Route path="/ContentAdmin/Page?/*" element={<PageTreeSideBar />} />
                                <Route path="/ContentAdmin/SharedContent/*" element={<SharedContentSideBar />} />
                            </Routes>
                        </>
                    )}
                    <SideBarCollapserArea>
                        <Clickable onClick={() => setIsCollapsed(!isCollapsed)} css={collapserClickableStyles}>
                            <Icon src={isCollapsed ? Maximize : Minimize} />
                        </Clickable>
                    </SideBarCollapserArea>
                </SideBarArea>
                <MainArea isSideBarCollapsed={isCollapsed}>
                    <Routes>
                        <Route path="/ContentAdmin" element={<MainHeader />} />
                        {["/ContentAdmin/Page/*", "/ContentAdmin/SharedContent/*"].map(path => (
                            <Route key={`path-${path}`} path={path} element={<MainHeader />} />
                        ))}
                        {["/ContentAdmin/Design/StyleGuide", "/ContentAdmin/"].map(path => (
                            <Route key={`disabled-path-${path}`} path={path} element={<MainHeader />} />
                        ))}
                    </Routes>
                    <Routes>
                        {["/ContentAdmin/Page/:id", "/ContentAdmin/SharedContent/:id"].map(path => (
                            <Route key={path} path={path} element={<PageEditor />} />
                        ))}
                        <Route path="/ContentAdmin/Design/StyleGuide" element={<StyleGuidePreview />} />
                        {["/ContentAdmin", "/ContentAdmin/Page"].map(path => (
                            <Route key={path} path={path} element={<HomePageLoader />} />
                        ))}
                    </Routes>
                </MainArea>
                <LogoutWarningModal />
                <ErrorModal />
                <PublishComparer />
                <ImportExportModal />
                <RestoreContentModal />
                <CompleteVersionHistoryModal />
            </Toaster>
        </FlexWrapper>
    );
};

export default Layout;

export const SideBarStyle = styled.div<InjectableCss>`
    width: ${(props: ShellThemeProps) => props.theme.sideBarWidth};
    height: calc(100vh - 136px);
    overflow-x: hidden;
    overflow-y: auto;
    ${injectCss}
`;
