import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import Avatar from '../../Avatar';
import { Stack } from '@mui/material';
import { IconCheck, IconDots, IconExclamationCircle, IconProgress, } from '@tabler/icons-react';
import { TrackerOnlyState } from '../types';
const TrackerOnly = ({ continued, state }) => {
    const { avatarProps, lineProps } = useMemo(() => {
        switch (state) {
            case TrackerOnlyState.COMPLETE:
                return {
                    avatarProps: {
                        color: 'primary',
                        Icon: IconCheck,
                        sx: {
                            borderColor: theme => theme.palette.new.border.neutral.brand,
                            borderStyle: 'solid',
                        },
                    },
                    lineProps: {
                        backgroundColor: theme => theme.palette.new.action.button.background.primary.default,
                    },
                };
            case TrackerOnlyState.CURRENT:
                return {
                    avatarProps: {
                        color: 'white',
                        Icon: IconProgress,
                        sx: {
                            borderColor: theme => theme.palette.new.action.button.background.primary.default,
                            borderStyle: 'solid',
                            color: theme => theme.palette.new.icon.neutral.brand,
                        },
                    },
                    lineProps: {
                        backgroundColor: theme => theme.palette.new.border.neutral.default,
                    },
                };
            case TrackerOnlyState.DISABLED:
                return {
                    avatarProps: {
                        color: 'default',
                        Icon: IconDots,
                        sx: {
                            color: theme => theme.palette.new.icon.neutral.lighter,
                        },
                    },
                    lineProps: {
                        backgroundColor: theme => theme.palette.new.border.neutral.default,
                    },
                };
            case TrackerOnlyState.ERROR:
                return {
                    avatarProps: {
                        color: 'error',
                        Icon: IconExclamationCircle,
                        sx: {
                            color: theme => theme.palette.new.icon.feedback.error,
                        },
                    },
                    lineProps: {
                        backgroundColor: theme => theme.palette.new.border.neutral.default,
                    },
                };
        }
    }, [state]);
    return (_jsxs(Stack, { sx: { alignItems: 'center' }, children: [_jsx(Avatar, { ...avatarProps }), continued && (_jsx(Stack, { sx: { width: 2, flex: 1, minHeight: 72, ...lineProps } }))] }));
};
export default TrackerOnly;
