import useAppSelector from "@insite/client-framework/Common/Hooks/useAppSelector";
import { HasShellContext, withIsInShell } from "@insite/client-framework/Components/IsInShell";
import Zone from "@insite/client-framework/Components/Zone";
import setAddressBookOverlayIsOpen from "@insite/client-framework/Store/Components/AddressBookOverlay/Handlers/SetAddressBookOverlayIsOpen";
import { getLocation } from "@insite/client-framework/Store/Data/Pages/PageSelectors";
import PageModule from "@insite/client-framework/Types/PageModule";
import PageProps from "@insite/client-framework/Types/PageProps";
import Drawer, { DrawerPresentationProps } from "@insite/mobius/Drawer";
import { BaseTheme } from "@insite/mobius/globals/baseTheme";
import Page, { PageProps as MobiusPageProps } from "@insite/mobius/Page";
import { breakpointMediaQueries, injectCss } from "@insite/mobius/utilities";
import getColor from "@insite/mobius/utilities/getColor";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import styled, { css, ThemeProps, withTheme } from "styled-components";

type Props = PageProps & HasShellContext & ThemeProps<BaseTheme>;

export interface AddressBookOverlayStyles {
    page?: MobiusPageProps;
    drawer?: DrawerPresentationProps;
    innerWrapper?: InjectableCss;
}

export const addressBookOverlayStyles: AddressBookOverlayStyles = {
    page: {
        padding: 0,
    },
    drawer: {
        size: 400,
        closeButtonProps: {
            shape: "pill",
            buttonType: "solid",
            color: "common.background",
            size: 36,
        },
        cssOverrides: {
            drawerContent: css`
                overflow-y: initial;
            `,
            drawerTitle: css`
                background: ${getColor("common.background")};
            `,
            drawerBody: css`
                background: ${getColor("common.background")};
                ${({ theme }: { theme: BaseTheme }) =>
                    breakpointMediaQueries(
                        theme,
                        [
                            null,
                            css`
                                width: 100%;
                            `,
                        ],
                        "max",
                    )}
            `,
        },
    },
};

const InnerWrapper = styled.div<{ isEdit?: boolean } & InjectableCss>`
    padding: ${props => (props.isEdit ? "0" : "0 30px")};
    overflow: ${props => (props.isEdit ? "auto" : "hidden")};
    width: 100%;
    margin: 0 auto;
    ${injectCss}
`;

const styles = addressBookOverlayStyles;

const AddressBookOverlay = ({ id, shellContext: { isCurrentPage, isEditing, isInShell } }: Props) => {
    const isShell = isCurrentPage && isInShell;
    const isEdit = isShell && isEditing;
    const isOpen = useAppSelector(state => state.components.addressBookOverlay.isOpen);
    const dispatch = useDispatch();
    const closeDrawer = () => {
        dispatch(setAddressBookOverlayIsOpen({ isOpen: false }));
    };

    const location = useAppSelector(o => getLocation(o));
    useEffect(() => {
        dispatch(setAddressBookOverlayIsOpen({ isOpen: false }));
    }, [location.pathname]);

    return (
        <Page {...styles.page}>
            <Drawer
                {...styles.drawer}
                position="right"
                isOpen={isOpen || isShell}
                handleClose={closeDrawer}
                contentLabel="address book drawer"
            >
                <InnerWrapper isEdit={isEdit} {...styles.innerWrapper}>
                    <Zone contentId={id} zoneName="Content" />
                </InnerWrapper>
            </Drawer>
        </Page>
    );
};

const pageModule: PageModule = {
    component: withTheme(withIsInShell(AddressBookOverlay)),
    definition: {
        hasEditableTitle: false,
        hasEditableUrlSegment: false,
        pageType: "System",
    },
};

export default pageModule;
