import { AuditoryItem } from "@/api/auditory";
import Trash from "@/assets/icons/trash";
import { useCurrentQuiz } from "@/stores/quizes/hooks";
import { InfoPopover } from "@/ui_kit/InfoPopover";
import TooltipClickInfo from "@/ui_kit/Toolbars/TooltipClickInfo";
import { useDomainDefine } from "@/utils/hooks/useDomainDefine";
import { IconButton, ListItem, Typography, useTheme } from "@mui/material";
import { CopyButton } from "./CopyButton";

interface AuditoryLinkProps {
    item: AuditoryItem;
    index: number;
    onDelete: (id: number) => void;
    utmParams: string
}

export const AuditoryLink = ({ utmParams, item, index, onDelete }: AuditoryLinkProps) => {
    const theme = useTheme();
    const quiz = useCurrentQuiz();
    const { isTestServer } = useDomainDefine();

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

    const handleDelete = () => {
        onDelete(item.id);
    };

    const linkText = `${isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}${quiz?.qid}?_paud=${item.id}${utmParams}`;

    return (
        <ListItem
            key={index}
            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: "70px",
                    justifyContent: "space-between",
                },
            }}
            secondaryAction={
                <>
                    <IconButton
                    className="delete_aud"
                        edge="end"
                        aria-label="delete"
                        sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}
                        onClick={handleDelete}
                    >
                        <Trash sx={{
                            "& path": {
                                stroke: theme.palette.brightPurple.main,
                            }
                        }} />
                    </IconButton>
                    <IconButton edge="end" aria-label="info" sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}>
                        <TooltipClickInfo title={`Пол: ${item.sex === 0 ? "женский" : item.sex === 1 ? "мужской" : "оба"} \n Возраст: ${item.age}`} />
                    </IconButton>
                    <CopyButton 
                        created_at={item.created_at} 
                        onCopy={handleCopy} 
                        text={linkText} 
                    />
                </>
            }
        >
            <Typography
            className="link"
             sx={{
                color: 'black', 
                fontWeight: 400, 
                fontSize: "16px",
                textOverflow: "ellipsis", 
                whiteSpace: "nowrap", 
                overflow: "hidden",
                width: "calc(100% - 80px)",
                userSelect: "none",
                WebkitUserSelect: "none",
                MozUserSelect: "none",
                msUserSelect: "none"
            }}>
                {linkText}
            </Typography>
        </ListItem>
    );
}; 