import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import siteMessage from "@insite/client-framework/SiteMessage";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import setContinueUpload from "@insite/client-framework/Store/Components/VmiUsersImportModal/Handlers/SetContinueUpload";
import setErrorsModalIsOpen from "@insite/client-framework/Store/Components/VmiUsersImportModal/Handlers/SetErrorsModalIsOpen";
import { VmiUserUploadError } from "@insite/client-framework/Store/Components/VmiUsersImportModal/Handlers/ValidateVmiUsers";
import translate from "@insite/client-framework/Translate";
import Button, { ButtonPresentationProps } from "@insite/mobius/Button";
import DataTable, { DataTableProps } from "@insite/mobius/DataTable";
import DataTableBody, { DataTableBodyProps } from "@insite/mobius/DataTable/DataTableBody";
import DataTableCell from "@insite/mobius/DataTable/DataTableCell";
import { DataTableCellBaseProps } from "@insite/mobius/DataTable/DataTableCellBase";
import DataTableHead, { DataTableHeadProps } from "@insite/mobius/DataTable/DataTableHead";
import DataTableHeader, { DataTableHeaderProps } from "@insite/mobius/DataTable/DataTableHeader";
import DataTableRow, { DataTableRowProps } from "@insite/mobius/DataTable/DataTableRow";
import Icon, { IconPresentationProps } from "@insite/mobius/Icon";
import Link, { LinkPresentationProps } from "@insite/mobius/Link";
import Modal, { ModalPresentationProps } from "@insite/mobius/Modal";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import getColor from "@insite/mobius/utilities/getColor";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import React from "react";
import { connect, ResolveThunks } from "react-redux";
import { css } from "styled-components";

const mapStateToProps = (state: ApplicationState) => ({
    errorsModalIsOpen: state.components.vmiUsersImportModal.errorsModalIsOpen,
    fullFileError: state.components.vmiUsersImportModal.fullFileError,
    errorEntries: state.components.vmiUsersImportModal.errorEntries,
    importedItems: state.components.vmiUsersImportModal.importedItems,
});

const mapDispatchToProps = {
    setErrorsModalIsOpen,
    setContinueUpload,
};

type Props = ReturnType<typeof mapStateToProps> & ResolveThunks<typeof mapDispatchToProps>;

export interface VmiUsersErrorsModalStyles {
    modal?: ModalPresentationProps;
    warningIcon?: IconPresentationProps;
    headerText?: TypographyPresentationProps;

    dataTable?: DataTableProps;
    tableHead?: DataTableHeadProps;
    rowNumberHeader?: DataTableHeaderProps;
    userNameHeader?: DataTableHeaderProps;
    vmiLocationsHeader?: DataTableHeaderProps;
    roleHeader?: DataTableHeaderProps;
    reasonHeader?: DataTableHeaderProps;
    tableBody?: DataTableBodyProps;
    tableRow?: DataTableRowProps;
    rowNumberCell?: DataTableCellBaseProps;
    userNameCell?: DataTableCellBaseProps;
    vmiLOcationsCell?: DataTableCellBaseProps;
    roleCell?: DataTableCellBaseProps;
    reasonCell?: DataTableCellBaseProps;

    instructionText?: TypographyPresentationProps;
    templateLink?: LinkPresentationProps;
    buttonsWrapper?: InjectableCss;
    cancelUploadButton?: ButtonPresentationProps;
    continueUploadButton?: ButtonPresentationProps;
}

export const vmiUsersErrorsModalStyles: VmiUsersErrorsModalStyles = {
    modal: {
        sizeVariant: "medium",
        cssOverrides: {
            modalTitle: css`
                padding: 10px 20px;
                justify-content: flex-start;
                font-weight: bold;
                font-size: 17px;
            `,
            modalContent: css`
                padding: 20px;
            `,
        },
    },
    warningIcon: {
        src: "AlertTriangle",
        color: "danger.main",
        css: css`
            margin-right: 10px;
        `,
    },
    dataTable: {
        cssOverrides: {
            table: css`
                margin-top: 15px;
            `,
        },
    },
    tableBody: {
        css: css`
            color: ${getColor("danger.main")};
        `,
    },
    instructionText: {
        css: css`
            margin-bottom: 12px;
        `,
    },
    buttonsWrapper: {
        css: css`
            margin-top: 30px;
            text-align: right;
        `,
    },
    cancelUploadButton: {
        variant: "secondary",
    },
    continueUploadButton: {
        css: css`
            margin-left: 10px;
        `,
    },
};

const styles = vmiUsersErrorsModalStyles;

const VmiUsersErrorsModal = ({
    errorsModalIsOpen,
    fullFileError,
    errorEntries,
    importedItems,
    setErrorsModalIsOpen,
    setContinueUpload,
}: Props) => {
    const cancelUploadClickHandler = () => {
        setErrorsModalIsOpen({ errorsModalIsOpen: false });
    };

    const continueUploadClickHandler = () => {
        setErrorsModalIsOpen({ errorsModalIsOpen: false });
        setContinueUpload({ continueUpload: true });
    };

    return (
        <Modal
            {...styles.modal}
            headline={
                <>
                    <Icon {...styles.warningIcon}></Icon>
                    <Typography {...styles.headerText}>{`${siteMessage("Vmi_VmiUserImport_Error")}${
                        fullFileError ? "." : ":"
                    }`}</Typography>
                </>
            }
            isOpen={errorsModalIsOpen}
            isCloseable={false}
        >
            {!fullFileError && (
                <DataTable {...styles.dataTable}>
                    <DataTableHead {...styles.tableHead}>
                        <DataTableHeader {...styles.rowNumberHeader}>{translate("Row #")}</DataTableHeader>
                        <DataTableHeader {...styles.userNameHeader}>{translate("User Name")}</DataTableHeader>
                        <DataTableHeader {...styles.vmiLocationsHeader}>{translate("VMI Locations")}</DataTableHeader>
                        <DataTableHeader {...styles.roleHeader}>{translate("Role")}</DataTableHeader>
                        <DataTableHeader {...styles.reasonHeader}>{translate("Reason")}</DataTableHeader>
                    </DataTableHead>
                    <DataTableBody {...styles.tableBody}>
                        {errorEntries.map(({ index, userName, vmiLocations, role, error }) => (
                            <DataTableRow key={index} {...styles.tableRow}>
                                <DataTableCell {...styles.rowNumberCell}>{index}</DataTableCell>
                                <DataTableCell {...styles.userNameCell}>{userName}</DataTableCell>
                                <DataTableCell {...styles.vmiLOcationsCell}>{vmiLocations}</DataTableCell>
                                <DataTableCell {...styles.roleCell}>{role}</DataTableCell>
                                <DataTableCell {...styles.reasonCell}>
                                    {error === VmiUserUploadError.NotFound && siteMessage("User_Not_Found")}
                                    {error === VmiUserUploadError.InvalidRole && translate("Invalid VMI Role")}
                                </DataTableCell>
                            </DataTableRow>
                        ))}
                    </DataTableBody>
                </DataTable>
            )}
            {fullFileError && (
                <Typography as="p" {...styles.instructionText}>
                    {siteMessage("Vmi_VmiUserImport_Instructions")}
                    <Link href="/Excel/VMIImport_userProfiles.csv" target="_blank" {...styles.templateLink}>
                        {translate("Download the template")}
                    </Link>
                </Typography>
            )}
            <StyledWrapper {...styles.buttonsWrapper}>
                <Button {...styles.cancelUploadButton} onClick={cancelUploadClickHandler}>
                    {translate("Cancel Upload")}
                </Button>
                <Button
                    {...styles.continueUploadButton}
                    onClick={continueUploadClickHandler}
                    disabled={!importedItems || importedItems.length === 0 || fullFileError}
                >
                    {translate("Continue Upload")}
                </Button>
            </StyledWrapper>
        </Modal>
    );
};

export default connect(mapStateToProps, mapDispatchToProps)(VmiUsersErrorsModal);
