import { AuditoryItem } from "@/api/auditory";
import CopyIcon from "@/assets/icons/CopyIcon";
import Trash from "@/assets/icons/trash";
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";

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

export const AuditoryLink = ({ utmParams, item, index, onDelete }: AuditoryLinkProps) => {
    const theme = useTheme();
    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/"}?_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
                        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 ? "мужской" : "женский"} \n Возраст: ${item.age}`} />
                    </IconButton>
                    <IconButton
                        edge="end"
                        aria-label="copy"
                        sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18, marginRight: "-2px" }}
                        onClick={() => handleCopy(linkText)}
                    >
                        <CopyIcon color={theme.palette.brightPurple.main} />
                    </IconButton>
                </>
            }
        >
            <Typography sx={{
                color: 'black', fontWeight: 400, fontSize: "16px",
                textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden",
                width: "calc(100% - 80px)"

            }}>
                {linkText}
            </Typography>
        </ListItem>
    );
};