const rootElement = document.getElementById('map-options')


function Card({ title, src, id, handleClickCard, text }) {

    return (
        <>
            <div className='card' style={{ maxWidth: '400px', minWidth: '130px', margin: "2%", height: "100px" }}>
                <div>
                    <img alt="Imagen ficha" src={src} />
                    <h2 style={{ margin: "15px" }}>{title}</h2>
                    <p>{text}</p>
                </div>
                <button id={id} onClick={e => handleClickCard(e)}>Conoce más</button>
            </div>
        </>
    )

}

function MapOptions() {


    const [section, setSection] = React.useState('main');
    const [cardSelected, setCardSelected] = React.useState('');
    const [commune, setCommune] = React.useState();

    const [showPopup, setShowPopup] = React.useState(false);
    const [popupImg, setPopupImg] = React.useState('/wp-content/statics/seguimiento/Techos/TechosComuna1.png');

    const linkMap = host + "/wp-content/statics/Mapa_distrito.svg";

    let infoCommunesMarker = [
        {
            x: "530", y: "180", name: "Corregimiento 50 - Corregimiento San Sebastián de Palmitas",
        },
        {
            x: "700", y: "330", name: "Corregimiento 60 - Corregimiento San Cristobal",
        },
        {
            x: "580", y: "620", name: "Corregimiento 80 - Corregimiento San Antonio de Prado",
        },
        {
            x: "730", y: "580", name: "Corregimiento 70 - Corregimiento Altavista",
        },
        {
            x: "1210", y: "520", name: "Corregimiento 90 - Corregimiento Santa Elena",
        },
        {
            x: "850", y: "610", name: "Comuna 16 - Belén",
        },
        {
            x: "910", y: "665", name: "Comuna 15 - Guayabal",
        },
        {
            x: "990", y: "685", name: "Comuna 14 - El Poblado",
        },
        {
            x: "780", y: "470", name: "Comuna 13 - San Javier",
        },
        {
            x: "830", y: "500", name: "Comuna 12 - La América",
        },
        {
            x: "910", y: "490", name: "Comuna 11 - Laureles Estadio",
        },
        {
            x: "980", y: "500", name: "Comuna 10 - La candelaria",
        },
        {
            x: "1040", y: "560", name: "Comuna 9 - Buenos Aires",
        },
        {
            x: "1060", y: "490", name: "Comuna 8 - Villa Hermosa",
        },
        {
            x: "880", y: "380", name: "Comuna 7 - Robledo",
        },
        {
            x: "930", y: "295", name: "Comuna 6 - Doce De Octubre",
        },
        {
            x: "970", y: "365", name: "Comuna 5 - Castilla",
        },
        {
            x: "1010", y: "405", name: "Comuna 4 - Aranjuez",
        },
        {
            x: "1070", y: "425", name: "Comuna 3 - Manrique",
        },
        {
            x: "1030", y: "305", name: "Comuna 2 - Santa Cruz",
        },
        {
            x: "1080", y: "350", name: "Comuna 1 - Popular",
        },
    ]

    const infoCards = allInfoCards[rootElement.dataset.nameSrc];
    const infoComunesLinks = infoCommunesLink[rootElement.dataset.nameSrc]

    const togglePopup = () => {
        setShowPopup(!showPopup);
    };

    const handleClickCard = (e) => {

        //Extract info of selected commune
        let comuneSelectd = infoComunesLinks.find(i => i.name === commune);

        infoCards.forEach(infoCard => {
            if (infoCard.id === e.target.id) {
                if(infoCard.id.includes('Img')) {
                    setPopupImg(host + comuneSelectd[infoCard.id] )
                    togglePopup();
                    document.getElementById("banner").scrollIntoView({ behavior: 'smooth' });
                }
                else window.location.href = host + comuneSelectd[infoCard.id];
            }
        })
    }

    function handleLocation(selectedCommune) {
        setCommune(selectedCommune);
        document.getElementById("section").scrollIntoView({ behavior: 'smooth' });
    }

    return (
        <>

            <main>

                <div className="popup-container">
                    {showPopup && (
                        <div className="popup">
                            <div className="popup-content">
                                <img
                                    src={ popupImg}
                                    alt="Popup"
                                />
                                <button onClick={togglePopup}>Cerrar</button>
                            </div>
                        </div>
                    )}
                </div>

                <div className="main-container">
                    {section === 'main' && <div>
                        <div id="img_container">

                            <figure  >
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 1720 880" preserveAspectRatio="xMinYMin meet">

                                    <image width="1720" height="880" xlinkHref={linkMap} />

                                    {infoCommunesMarker.map(item => {
                                        return <a style={{ cursor: "pointer" }} onClick={() => handleLocation(item.name)}>
                                            <text x={item.x} y={item.y} style={{ fontSize: "50px", fill: "Black" }} class="material-icons">location_on </text>
                                        </a>
                                    })}

                                </svg>

                            </figure>

                        </div>

                        <div id="section">
                            {!commune && <div class="alert alert-light" role="alert" style={{ textAlign: "center" }}>
                                Para continuar debes escoger un corregimiento o comuna.
                            </div>}
                            {commune && <div>
                                <h1 style={{ textAlign: "center", }}>{commune}</h1>
                                <div className="card_wraper">

                                    {infoCards.map(item => <Card title={item.title}
                                        text={item.text}
                                        id={item.id}
                                        handleClickCard={handleClickCard}
                                        src={item.linkImg}
                                    ></Card>)}
                                </div>

                                <h1 className="tooltip">Tooltip para enlace 2</h1></div>}
                        </div>

                    </div>}

                </div>
            </main>
        </>
    )
}

ReactDOM.render(
    <MapOptions />,
    rootElement
)