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

const PURPLE = "#7E2AEA";

export const AuditoryList = () => {
    const theme = useTheme();
    const quiz = useCurrentQuiz();
    const { isTestServer } = useDomainDefine();
    const [linksOpen, setLinksOpen] = useState(true);
    const [auditory, setAuditory] = useState<AuditoryItem[]>([]);

    const handleCopy = (text: string) => {
        navigator.clipboard.writeText(text);
    };

    useEffect(() => {
        (async () => {
            if (quiz?.backendId) {
                const [result, error] = await auditoryGet({ quizId: quiz.backendId });
                console.log("result-___---_------__---__-__---_------__---__-__---_------__---__-__---_------__---__-____--__")
                console.log(result)
                if (result) {
                    setAuditory(result);
                }
            }
        })();
    }, [quiz]);

    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: PURPLE, 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) => {
                            const linkText = `${isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}?_paud=${item.id}`;
                            console.log(item)
                            return (
                                <ListItem
                                    key={idx}
                                    disablePadding
                                    sx={{
                                        bgcolor: "#F2F3F7",
                                        borderRadius: "10px",
                                        p: "13px 14px 13px 20px",
                                        mb: "8px",
                                        maxWidth: "756px",
                                        display: "flex",
                                        alignItems: "center",
                                        transition: 'background 0.2s, border 0.2s',
                                        '& .MuiListItemSecondaryAction-root': {
                                            display: 'flex',
                                            alignItems: 'center',
                                            gap: '12px',
                                            width: "60px",
                                            justifyContent: "space-between",
                                        },
                                    }}
                                    secondaryAction={
                                        <>
                                            <IconButton edge="end" aria-label="info" sx={{ color: PURPLE, p: 0, width: 18, height: 18 }}>
                                                <InfoPopover />
                                            </IconButton>
                                            <IconButton 
                                                edge="end" 
                                                aria-label="copy" 
                                                sx={{ color: PURPLE, p: 0, width: 18, height: 18, marginRight: "-2px" }}
                                                onClick={() => handleCopy(linkText)}
                                            >
                                                <CopyIcon color={PURPLE} />
                                            </IconButton>
                                        </>
                                    }
                                >
                                    <Typography sx={{ color: 'black', fontWeight: 400, fontSize: "16px" }}>
                                        {linkText}
                                    </Typography>
                                </ListItem>
                            );
                        })}
                    </List>
                </Collapse>
            </Box>
        </>
    );
};