/* eslint-disable react/jsx-no-bind */
import { Button, LinearProgress, linearProgressClasses } from '@mui/material';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import type React from 'react';
import { useState } from 'react';

import CloseNavArrowSvg from '../Side/Components/CloseNavArrowSvg';
import ComputerSvg from './Components/ComputerSvg';
import ProgressBarContent from './Components/ProgressBarContent';
import { CheckList } from './Components/ProgressBarHelper';
import styles from './ProgressBar.module.scss';

const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
	height: 10,
	borderRadius: 5,
	[`&.${linearProgressClasses.colorPrimary}`]: {
		backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800]
	},
	[`& .${linearProgressClasses.bar}`]: {
		borderRadius: 5,
		backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8'
	}
}));

const ProgressBar: React.FC = (): JSX.Element => {
	const value = 50;
	const [progressBar, setProgressBar] = useState(styles.progressContainer);

	function progressBarHandler(): void {
		if (progressBar === styles.progressContainer) {
			setProgressBar(`${styles.progressContainer} ${styles.openProgressBarContainer}`);
		} else {
			setProgressBar(styles.progressContainer);
		}
	}
	return (
		<div className={progressBar}>
			<div className={styles.progressBarBox}>
				<ComputerSvg class={styles.computerSvg} />
				<p>
					Setup progress <small>{value}%</small>
				</p>
				<Box
					sx={{
						width: '100%'
					}}
				>
					<BorderLinearProgress value={value} variant="determinate" />
				</Box>
			</div>
			<Button onClick={progressBarHandler}>
				<CloseNavArrowSvg className={styles.openButton} />
			</Button>
			<ProgressBarContent checkList={CheckList} className={styles.progressBarContext} />
		</div>
	);
};

export default ProgressBar;