import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Box,
    Button,
    ButtonGroup,
    CircularProgress,
    Grid,
    Typography
} from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import VerifiedIcon from '@mui/icons-material/Verified';
import Check from "@mui/icons-material/Check";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
import {useState} from "react";

const CustomAccordion = ({
                             title,
                             hasOpened,
                             hasAccordionOpened,
                             handleAccordionChange,
                             accordionIndex,
                             downloadFile
                         }) => {
    const [downloadStatus, setDownloadStatus] = useState('initial');
    const handleDownloadClick = (setStatus, url) => {
        setStatus('downloading');
        window.open(url, '_blank');
        setTimeout(() => {
            setStatus('completed');
            setTimeout(() => {
                setStatus('initial');
            }, 1200);
        }, 1000);
    };
    return (
        <Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)}
                   sx={{
                       mb: 2,
                       boxShadow: 1,
                       backgroundColor: "#f7f7f7"
                   }}>
            <AccordionSummary expandIcon={<ExpandMoreIcon/>}>
                <Box sx={{width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                    <Box sx={{display: "flex", alignItems: "center", gap: 0.5}}>
                        <Typography sx={{fontWeight: 500, color: "primary.main"}}>{title}</Typography>
                        {hasAccordionOpened && <VerifiedIcon style={{color: "green"}}/>}
                    </Box>
                </Box>
            </AccordionSummary>
            <AccordionDetails sx={{display: "flex", justifyContent: "center", alignItems: "center"}}>
                <Grid container direction="column" alignItems="center">
                    <Grid item>
                        <ButtonGroup variant="contained" aria-label="outlined primary button group">
                            <Button onClick={() => handleDownloadClick(setDownloadStatus, downloadFile)}>
                                {downloadStatus === 'completed' ? (
                                    <Check sx={{color: 'white'}} fontSize="small"/>
                                ) : downloadStatus === 'downloading' ? (
                                    <CircularProgress sx={{color: 'white'}} size={18}/>
                                ) : (
                                    <FileDownloadOutlinedIcon sx={{color: 'white'}} fontSize="small"/>
                                )}
                            </Button>
                        </ButtonGroup>
                    </Grid>
                </Grid>
            </AccordionDetails>
        </Accordion>
    );
}

export default CustomAccordion;
