import { Image, Paper, Popover, em, rgba } from '@mantine/core';
import clientPhoto from '../../Images/client/eva.jpg';
import CosmeticProductCard from './CosmeticProductCard';
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
import { useState } from 'react';
import hotspots from './HotSpots.json';

const HotspotPicture = () => {
    const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
    const [activeCard, setActiveCard] = useState(null);
    const pulseStyle = `
    @keyframes fadePulse {
      0% {
        background-color: white;
        box-shadow: 0 0 0px #ffc0cb;
        opacity: 0.8;
      }
      50% {
        background-color: #ffc0cb;
        box-shadow: 0 0 10px #ffc0cb;
        opacity: 0.6;
      }
      100% {
        background-color: white;
        box-shadow: 0 0 0px #ffc0cb;
        opacity: 0.8;
      }
    }
  `;

    return (
        <>
            <style>{pulseStyle}</style>
            <div style={{ position: 'relative', maxWidth: '100vw', maxHeight: '100vh' }}>
                <Image src={clientPhoto} mah={'85vh'} maw={"85vh"} radius="100%" />

                {/* Hotspot with Popover */}
                {hotspots.map((hotspot, index) => {
                    const { left, top, title, products } = hotspot;
                    const isOpen = activeCard === index;
                    return (
                        <Popover
                        key={index}
                            opened={isOpen}
                            onChange={()=>setActiveCard(isOpen ? null : index)}
                            position="top"
                            withArrow
                            trapFocus
                            transition="pop"
                        >
                            <Popover.Target>
                                <Paper
                                    onPointerDown={()=>setActiveCard(isOpen ? null : index)}
                                    style={{
                                        position: 'absolute',
                                        top: `${top}%`,
                                        left: `${left}%`,
                                        transform: 'translate(-50%, -50%)',
                                        width: isMobile ? 10 : 20,
                                        height: isMobile ? 10 : 20,
                                        backgroundColor: 'pink',
                                        borderRadius: '50%',
                                        cursor: 'pointer',
                                        animation: 'fadePulse 2s infinite',
                                        zIndex: 10,
                                    }}
                                />
                            </Popover.Target>
                            <Popover.Dropdown bg={rgba("red", 0)} bd={'none'}>
                                <CosmeticProductCard products={products} title={title}/>
                            </Popover.Dropdown>
                        </Popover>)
                })}
            </div>
        </>
    );
};

export default HotspotPicture;
