import { auditoryGet, AuditoryResponse, AuditoryItem } from "@/api/auditory";
import ArrowDownIcon from "@/assets/icons/ArrowDownIcon";
import { useCurrentQuiz } from "@/stores/quizes/hooks";
import { useDomainDefine } from "@/utils/hooks/useDomainDefine";
import { Box, Collapse, IconButton, List, Typography, useTheme } from "@mui/material";
import { useEffect, useState } from "react";
import { AuditoryLink } from "./AuditoryLink";

export const AuditoryList = ({auditory, onDelete}:{auditory:AuditoryItem[], onDelete: (id: number) => void}) => {
    const theme = useTheme();
    const { isTestServer } = useDomainDefine();
    const [linksOpen, setLinksOpen] = useState(true);

    console.log("auditory-___---_auditory__---__-__auditory_------__---__-__---_------__---__-__---_------__---__-____--__")
    console.log(auditory)

    return (
        <>
            <Box sx={{
                maxWidth: "796px",
                bgcolor: "#fff",
                borderRadius: "12px",
                p: "20px",
                boxShadow: "0px 4px 32px 0px #7E2AEA14",
                mt: "24px"
            }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Typography sx={{ fontSize: "18px", fontWeight: 500, color: theme.palette.grey3.main }}>
                        Ваши сохраненные ссылки
                    </Typography>
                    <IconButton
                        sx={{ cursor: 'pointer', color: theme.palette.brightPurple.main, display: 'flex', alignItems: 'center', transition: 'transform 0.2s', transform: linksOpen ? 'rotate(0deg)' : 'rotate(180deg)' }}
                        onClick={() => setLinksOpen((prev) => !prev)}
                        size="large"
                    >
                        <ArrowDownIcon style={{ width: "18px", height: "18px" }} />
                    </IconButton>
                </Box>
                <Collapse in={linksOpen} timeout="auto" unmountOnExit sx={{ mt: "3px" }}>
                    <List sx={{ gap: '8px', p: 0, m: 0 }}>
                        {auditory.map((item, idx) => (
                            <AuditoryLink key={idx} item={item} index={idx} onDelete={onDelete} />
                        ))}
                    </List>
                </Collapse>
            </Box>
        </>
    );
};