import React, { useCallback, useState } from 'react';
import { Stepper, Step, StepLabel, StepConnector, Typography, makeStyles, withStyles, lighten, Button } from '@material-ui/core';
import CheckCircleIcon from '@material-ui/icons/esm/CheckCircle';
import RadioButtonUncheckedIcon from '@material-ui/icons/esm/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@material-ui/icons/esm/RadioButtonChecked';
import { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';
import { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons';
import { formatDateToLocaleString } from '../../utilities/input/DateUtilities';
import { DateTime } from 'luxon';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex'
    },
    taskInfoBlock: {
        backgroundColor: lighten(theme.palette.primary.main, 0.3),
        width: theme.spacing(25),
        color: theme.palette.common.white,
        padding: `${theme.spacing(0.5)}px ${theme.spacing(2.25)}px`
    },
    description: {
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'nowrap'
    },
    button: {
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.common.white,
        borderRadius: 0,
        '&:hover': {
            backgroundColor: theme.palette.primary.dark
        },
        minWidth: theme.spacing(3)
    },
    stepperContainer: {
        width: '100%',
        padding: 0,
        marginTop: `-${theme.spacing(1.5)}px`,
        background: 'none'
    },
    stepIconRoot: {
        zIndex: 1,
        color: theme.palette.primary.main,
        width: theme.spacing(3),
        height: theme.spacing(3),
        display: 'flex',
        borderRadius: '50%',
        justifyContent: 'center',
        alignItems: 'center',
        '&.active': {
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white
        },
        '&.completed': {
            backgroundColor: theme.palette.common.white,
            color: theme.palette.success.main
        }
    },
    stepLabel: {
        '& > .MuiStepLabel-label': {
            marginTop: theme.spacing(0.5)
        }
    }
}));
const ColorLibConnector = withStyles((theme) => ({
    connectorRoot: {
        top: 10,
        left: 'calc(-50% + 12px)',
        right: 'calc(50% + 12px)'
    },
    alternativeLabel: {
        left: 'calc(-50% + 12px)',
        right: 'calc(50% + 12px)'
    },
    active: {
        '& $line': {
            borderColor: theme.palette.primary.main
        }
    },
    completed: {
        '& $line': {
            borderColor: theme.palette.primary.main
        }
    },
    line: {
        borderTopWidth: 3,
        borderRadius: 1
    }
}))(StepConnector);
const ColorlibStepIcon = (props) => {
    const { active, completed } = props;
    const classes = useStyles();
    const rootClass = `${classes.stepIconRoot} ${active ? 'active' : ''} ${completed ? 'completed' : ''}`;
    return (React.createElement("div", { className: rootClass }, completed ? (React.createElement(CheckCircleIcon, null)) : active ? (React.createElement(RadioButtonCheckedIcon, null)) : (React.createElement(RadioButtonUncheckedIcon, null))));
};
export const WorkflowTaskFlow = (props) => {
    var _a, _b;
    const { steps = [], handleClick = () => { }, task } = props;
    const classes = useStyles();
    const [activeStep, setActiveStep] = useState(0);
    const handleStepClick = (stepIndex) => {
        handleClick(stepIndex);
        setActiveStep(stepIndex);
    };
    const handleOnLeftButtonClick = useCallback(() => {
        if (activeStep > 0) {
            const newIndex = activeStep - 1;
            handleClick(newIndex);
            setActiveStep(newIndex);
        }
    }, [activeStep, handleClick]);
    const handleOnRightButtonClick = useCallback(() => {
        if (activeStep !== (steps === null || steps === void 0 ? void 0 : steps.length) - 1) {
            const newIndex = activeStep + 1;
            handleClick(newIndex);
            setActiveStep(newIndex);
        }
    }, [steps, activeStep, handleClick]);
    const getFormattedDueDate = useCallback((date) => {
        if (!date) {
            return '';
        }
        const shortDate = formatDateToLocaleString(date, DateTime.DATE_SHORT);
        return `Due ${shortDate}`;
    }, []);
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.taskInfoBlock }, React.createElement("div", { className: classes.description }, React.createElement(Typography, { variant: "caption" }, ((_a = task === null || task === void 0 ? void 0 : task.properties) === null || _a === void 0 ? void 0 : _a.nodeLabel) || '')), React.createElement("div", { className: classes.description }, React.createElement(Typography, { variant: "caption", style: { fontWeight: 500 } }, getFormattedDueDate((_b = task === null || task === void 0 ? void 0 : task.properties) === null || _b === void 0 ? void 0 : _b.dueDate)))), React.createElement(Button, { className: classes.button, onClick: handleOnLeftButtonClick }, React.createElement(FluentIcon, { component: ChevronLeftIcon })), React.createElement(Stepper, { alternativeLabel: true, activeStep: activeStep, connector: React.createElement(ColorLibConnector, null), className: classes.stepperContainer }, steps.map((step, index) => (React.createElement(Step, { key: step.label, onClick: () => handleStepClick(index) }, React.createElement(StepLabel, { classes: { labelContainer: classes.stepLabel }, StepIconComponent: ColorlibStepIcon }, React.createElement(Typography, { variant: "caption" }, step.label)))))), React.createElement(Button, { className: classes.button, onClick: handleOnRightButtonClick }, React.createElement(FluentIcon, { component: ChevronRightIcon }))));
};
//# sourceMappingURL=WorkflowTaskFlow.js.map