import useAppSelector from "@insite/client-framework/Common/Hooks/useAppSelector";
import mergeToNew from "@insite/client-framework/Common/mergeToNew";
import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import setShareListDetailModalIsOpen from "@insite/client-framework/Store/Components/ShareListDetailModal/Handlers/SetShareListDetailModalIsOpen";
import translate from "@insite/client-framework/Translate";
import Button, { ButtonPresentationProps } from "@insite/mobius/Button";
import Modal, { ModalPresentationProps } from "@insite/mobius/Modal";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { css } from "styled-components";

interface OwnProps {
    extendedStyles?: ShareListDetailModalStyles;
}

export interface ShareListDetailModalStyles {
    modal?: ModalPresentationProps;
    sharedWithAllText?: TypographyPresentationProps;
    buttonsWrapper?: InjectableCss;
    closeButton?: ButtonPresentationProps;
}

export const shareListDetailModalStyles: ShareListDetailModalStyles = {
    modal: {
        size: 600,
        cssOverrides: {
            modalTitle: css`
                padding: 10px 20px;
            `,
            modalContent: css`
                padding: 20px;
            `,
        },
    },
    sharedWithAllText: {
        css: css`
            margin-top: 15px;
            margin-bottom: 15px;
            display: block;
        `,
    },
    buttonsWrapper: {
        css: css`
            margin-top: 20px;
            display: flex;
            align-items: center;
        `,
    },
    closeButton: {
        css: css`
            margin-left: auto;
        `,
    },
};

const ShareListDetailModal = ({ extendedStyles }: OwnProps) => {
    const modalIsOpen = useAppSelector(state => state.components.shareListDetailModal.isOpen);
    const listOwner = useAppSelector(state => state.components.shareListDetailModal.listOwner || "");
    const dispatch = useDispatch();

    const [styles] = useState(() => mergeToNew(shareListDetailModalStyles, extendedStyles));

    const modalCloseHandler = () => {
        dispatch(setShareListDetailModalIsOpen({ modalIsOpen: false }));
    };

    return (
        <Modal
            {...styles.modal}
            headline={translate("Share Details")}
            isOpen={modalIsOpen}
            handleClose={modalCloseHandler}
        >
            <Typography>
                {translate("List Owner: ")} {listOwner}
            </Typography>
            <Typography {...styles.sharedWithAllText}>
                {translate("Shared with all users on billing account.")}
            </Typography>
            <StyledWrapper {...styles.buttonsWrapper}>
                <Button {...styles.closeButton} onClick={() => modalCloseHandler()} data-test-selector="doneButton">
                    {translate("Close")}
                </Button>
            </StyledWrapper>
        </Modal>
    );
};

export default ShareListDetailModal;
