import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Box,
    Typography,
    Grid, ButtonGroup, Button, CircularProgress
} 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 VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded";
import {useTranslations} from "next-intl";
import {useState} from "react";

const CustomAccordion = ({ title,
                             hasOpened,
                             hasAccordionOpened,
                             handleAccordionChange,
                             accordionIndex,
                             handleSizeChange }) => {
    const t = useTranslations();
    const [downloadStatus, setDownloadStatus] = useState('initial');
    const handleDownloadClick = (setStatus) => {

        console.log(setStatus)
        setStatus('downloading');
        setTimeout(() => {
            setStatus('completed');
            setTimeout(() => {
                setStatus('initial');
            }, 2500);
        }, 2000);
        // Perform the actual download logic here
    };
    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)}>
                            {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;