import { Box, LinearProgress as MuiLinearProgress } from "@mui/material";
import { styled } from "@mui/material/styles";

const PREFIX = "MuiLinearProgress";

const classes = {
    chip: `${PREFIX}-bar`,
};

const StyledMuiLinearProgress = styled(MuiLinearProgress, {
    shouldForwardProp: (prop) => prop !== "barBackground" && prop !== 'barColor' && prop !== 'height'
})(({ theme, barColor, barBackground, height }) => ({
    height: height || 8,
    borderRadius: 4,
    backgroundColor: barBackground || theme.palette.grey[300],
    '& .MuiLinearProgress-bar': {
        backgroundColor: barColor || theme.palette.primary.main
    }
}));

const LinearProgressBar = (props) => {
    return (
        <Box sx={{ position: 'relative', width: '100%', py: 1 }}>
            <StyledMuiLinearProgress {...props} />
            {props.target && <Box
                sx={{
                    position: 'absolute',
                    left: `${Math.min(Math.max(props.target, 0), 100)}%`,
                    top: props.targetTop || 0,
                    bottom: props.targetBottom || 0,
                    width: props.targetWidth || "2px",
                    backgroundColor: props.targetBackgroundColor || 'white',
                }}
            ></Box>}
        </Box>
    )
}

export default LinearProgressBar;