import React, { useEffect, useState } from 'react';
import { AmbientCard } from '../../UI/surfaces/cards/AmbientCard';
import { Typography } from '../../UI/dataDisplay/typography/Typography';
import { getSanitizedName } from '../../utilities/entities/entityUtilities';
import { FluentListItem } from '../../UI/dataDisplay/FluentListItem';
import { VisualSearchObject } from './VisualSearchObject';
import { AmbientAlert } from '../../UI/feedback/AmbientAlert';
import { Skeleton } from '@material-ui/lab';
import { StatusChip } from '../../UI/dataDisplay/status/StatusChip';
import { Slide } from '@material-ui/core';
import { LinearProgress } from '../../UI/loading/LinearProgress';
import { EmptyStateDisplay } from '../../UI/dataDisplay/EmptyStateDisplay';
import { StatusCircleCheckmarkIcon } from '@fluentui/react-icons';
import { SideSheet } from '../../UI/surfaces/SideSheet';
import { useHistory } from 'react-router-dom';
export const ExportSidesheet = (props) => {
    var _a, _b, _c;
    const { entity, numRowsToExport, fileFormat, searchObject, errorList, activeExportJob, handleFileDownload, exportSidesheetOpen, handleCloseExportSidesheet, createExport, exportLoading, validSearch } = props;
    const history = useHistory();
    const [page, setPage] = useState('exportSummary');
    useEffect(() => {
        if (activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.id) {
            setPage('transition');
        }
    }, [activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.id]);
    const handleSummaryExited = () => {
        setPage('exportProgress');
    };
    const getJobStatus = (value) => {
        if (value === 1) {
            return { status: null, label: 'Pending' };
        }
        else if (value === 2) {
            return { status: 'info', label: 'Running' };
        }
        else if (value === 3) {
            return { status: 'success', label: 'Completed' };
        }
        else if (value === 4) {
            return { status: 'error', label: 'Failed' };
        }
    };
    const onCloseSidesheet = () => {
        setPage('exportSummary');
        handleCloseExportSidesheet();
    };
    return (React.createElement(SideSheet, { open: exportSidesheetOpen, onClose: onCloseSidesheet, width: '50%', onSubmit: createExport, buttonLabel: 'Create Export', buttonTwoLabel: "My Exports", buttonTwoAction: () => history.push('/myexports'), progress: exportLoading, buttonOneDisabled: !validSearch || activeExportJob }, React.createElement("div", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error) => (React.createElement(AmbientAlert, { alertMessage: error.message, showAlert: true, alertSeverity: error.severity }))), React.createElement(Slide, { in: page === 'exportSummary', onExited: handleSummaryExited, direction: "right", unmountOnExit: true, appear: false }, React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, React.createElement(AmbientCard, { title: "Export Summary", fullWidth: true, removeTopLayoutUnit: true }, React.createElement(Typography, null, "You are about to export all records from this table using you search criteria"), React.createElement("div", { style: { marginTop: 16 } }, React.createElement(FluentListItem, { subject: "Table", value: getSanitizedName(entity) }), React.createElement(FluentListItem, { subject: "Number of Rows", value: numRowsToExport !== null && numRowsToExport !== void 0 ? numRowsToExport : React.createElement(Skeleton, { width: 40, height: 26 }) }))), React.createElement(AmbientCard, { title: "Applied Filters", fullWidth: true }, React.createElement(VisualSearchObject, { searchObject: searchObject })), React.createElement(AmbientCard, { title: "Export Options", fullWidth: true }, React.createElement(FluentListItem, { subject: "File Format", value: fileFormat })))), React.createElement(Slide, { in: page === 'exportProgress', direction: "left", mountOnEnter: true }, React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, React.createElement(AmbientCard, { title: `Job Details`, fullWidth: true, removeTopLayoutUnit: true }, React.createElement("div", { style: { marginBottom: 25 } }, React.createElement(Typography, null, "Exports are handled in the background. You can safely clos this window")), React.createElement(FluentListItem, { subject: "Job Id", value: activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.id }), React.createElement(FluentListItem, { subject: "Status", value: React.createElement(StatusChip, { status: (_a = getJobStatus(activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.statusId)) === null || _a === void 0 ? void 0 : _a.status, label: (_b = getJobStatus(activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.statusId)) === null || _b === void 0 ? void 0 : _b.label }) })), React.createElement(AmbientCard, { title: `Export ${(_c = getJobStatus(activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.statusId)) === null || _c === void 0 ? void 0 : _c.label}`, fullWidth: true, removeTopLayoutUnit: true }, ((activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.statusId) === 1 ||
        (activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.statusId) === 2) && React.createElement(LinearProgress, null), (activeExportJob === null || activeExportJob === void 0 ? void 0 : activeExportJob.statusId) === 3 &&
        (!errorList.some((err) => (err === null || err === void 0 ? void 0 : err.id) === 'fileResultGet') ? (React.createElement(EmptyStateDisplay, { icon: StatusCircleCheckmarkIcon, primaryText: 'File is ready!', actionLabel: "Download", action: handleFileDownload && (() => handleFileDownload()) })) : (React.createElement(Typography, null, "To download the file, please go to the My Exports page")))))))));
};
//# sourceMappingURL=ExportSidesheet.js.map