
const rootElement = document.getElementById('root')

const BiplContext = React.createContext();

//Components
function Carousel() {
    return (
        <>
            <div id="carousel_container">
                <input type="radio" name="position" />
                <input type="radio" name="position" />
                <input type="radio" name="position" checked />
                <input type="radio" name="position" />
                <input type="radio" name="position" />
                <main id="carousel">

                    <div class="item">
                        <div class="card">
                            <img src="" />
                            <div class="container">
                                <button >Presupuesto <br></br> Participativo</button>
                                <button >Proyectos contruccion <br></br> comunitaria</button>
                                <button >Otras fuentes</button>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="card">
                            <img src="" />
                            <div class="container">
                                <button >Presupuesto <br></br> Participativo</button>
                                <button >Proyectos contruccion <br></br> comunitaria</button>
                                <button >Otras fuentes</button>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="card">
                            <div class="container">
                                <button >Presupuesto <br></br> Participativo</button>
                                <button >Proyectos contruccion <br></br> comunitaria</button>
                                <button >Otras fuentes</button>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="card">
                            <div class="container">
                                <button >Presupuesto <br></br> Participativo</button>
                                <button >Proyectos contruccion <br></br> comunitaria</button>
                                <button >Otras fuentes</button>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="card">
                            <div class="container">
                                <button >Presupuesto <br></br> Participativo</button>
                                <button >Proyectos contruccion <br></br> comunitaria</button>
                                <button >Otras fuentes</button>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="card">
                            <div class="container">
                                <button >Presupuesto <br></br> Participativo</button>
                                <button >Proyectos contruccion <br></br> comunitaria</button>
                                <button >Otras fuentes</button>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </>
    )
}

function GenericList({ filesNames }) {

    return (
        <>
            <div id="section_list">
                {filesNames.map(file => <div><a href={"/ndesarrollo"+ file.sourceLink} >{file.name}</a></div>)}
            </div>
        </>
    )
}

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

    return (
        <>
            <div className='card'>
                <div>
                    <img alt="Imagen ficha" src={src} />
                    <h2>{title}</h2>
                    <p>{text}</p>
                </div>
                <button id={id} onClick={e => handleClickCar(e)}>Conoce más</button>
            </div>
        </>
    )

}

function Separator() {
    return (
        <div>
            <img src="data:image/webp;base64,UklGRuwDAABXRUJQVlA4TN8DAAAvf0c1EPegqG0jKfzRzrtzzy4Ig2wjzZ/wOa4ATzBJ0/8vDxxBtk39aXeCJ6X/txuH4PDhTnD4EBzuNBxUPzWqn6SgbRvJ4Q97uwdCRExApQohZK2Mv+2SoiiKsichhBCSJDiSJCmSkoAOkqwi/v/ezIJq7bSWY0oT0f8JkCBJktw2+kEDOwQGRHPx/38CXCxPnx0d0f8J+LH/7X/73/63/+3/l+LCKr5mUnwVLuILnLUXwdBeMzhorwKiKq8KEKvyuu5m5XXZFeG1YYdNd12PVt11OZpk14ajQXZddyuAm+qKXQKYRFfFvUF0ZQNWzTW2hOS6ogVVcZW2WXCtaBs2vTWewFVuLTgzqq3bcAqr1toKzoXWSnQA5VdIreiCqqEIAM/VOsmvsP+snqEPlBbsP/vv/1+b/GIv2n/2n9OxyK/sleqH2Xp9kcycdrmveinRGi+Cdtp/0mSSX6GIImJsKiR5e65K8uVCzszRuw+6xnMlTiugQG85lTj7NQAIk6pmZn4YiCGi++cp8gv2n2wg+heSlF6HPar8oi7b5BftP5mxyq/0xVb5lW5Uz9RIT/j5Ls+TAFJRhS82y69wuYr8wmtUnt56baSoSpxmLwL6hI2qq/XrKFKl8u72KwGpkniLoo8KKtunNxd5HFoIb7vLA/VZnlRJ21vBSUHB9/D874/WUOAb/JZ4KLXmOLzd6SuuAoeUZmys0mWM4/dV4uT4TlpTunyX9p8MIVr9rykzc1Jez6q/9rTAKBfLb4eF++VFFpKw/+1/+9/+t//t/1e8nXGoW8NxtoaDjVXDqetQEdRRMoI61OCioV3uUb5u7lGqXRYNwVB+4YRySFg0XD1E0hOshsKGIW3IjtwkWA3JhiFtyI7cEqyGZMN4BFZDsmFIG7IjNwlWQ7JhSBuyI7cEqyHZMNItwWpINgxpQ3bkJsFqSDYMaUN25JZgNSQbRiLpIZ0WDYyQmWEPWKblmAfLtBz/DizTcsyDZVqOXYJ7wDItxzxYpuXYx8wQEhYN5/46Ovc1A/Q6YqwZTi+kq68Z8EIKLhliUygnZ+3qHPYJztolDvsUZ+0Sh/0RZ+0Sh32Cs3aJwz7FWbvEYX/AWbvEYZ/grF3isE9x1i5x2FMOqZ/XDHxo9lOzJ0wfzH5q9oTp1eynZk+Y/YCwZODtlXRaMmzxSsKSAfdX0qWtGE56JTFWDJCivL5wyqskvy4Y7tDR7vTD7vNTBxcMHfdXkq8Y5DjareE4veFoz23F8Of/P//b//a//W//2//2/38u5feP/W//2//2v/1v/9v/9r/9b//b//a//W//2//2vx0MAA==" alt="" />
        </div>
    )
}

//Sections
function CardOptionsByYear({ handleYear, handleClickCard, text, bannerUrl, cardsInfo }) {

    const biplData = React.useContext(BiplContext);
    const year = biplData[0];
    const cardSelected = biplData[1];
    const commune = biplData[2];

    let cardsInfoToShow = [];

    //Validate how many cards there are in a certain year and just take that date from cards info array
    try {
        Object.keys(dataFilesInfo[commune][year]).forEach(folderName => {
            cardsInfoToShow.push(cardsInfo.find(cardInfo => cardInfo.id === folderName));
        })
    } catch (e) {
        console.log(e);
    }

    return (
        <>
            <div id="biplYearOptions" className="seccion-content">

                <img src={bannerUrl}></img>
                <p style={{ fontSize: "21px", margin: "3% " }}>{text}</p>


                {year == "Seleccion el año de visualizacion" &&
                    <div class="alert alert-warning" style={{ maxWidth: "90%", marginLeft: "50px" }} role="alert">
                        <p><b>Para continuar es necesario eligir un año de visualizacion.   </b> <i class="material-icons" >arrow_downward</i></p>
                    </div>}

                <select
                    class="form-select"
                    style={{ maxWidth: "40%" }}
                    name="years"
                    id="years"
                    onChange={(e) => handleYear(e)}
                    defaultValue={year}
                >

                    <option >Seleccion el año de visualizacion</option>
                    <option value="2023">2023</option>
<option value="2022">2022</option>
                    <option value="2021">2021</option>
                    <option value="2020">2020</option>
                    <option value="2019">2019</option>
                    <option value="2018">2018</option>
                    <option value="2017">2017</option>
                </select>

                {year != "Seleccion el año de visualizacion" && <div style={{textAlign:"center"}}>
                    <h1 >Año {year}</h1>
                    <div className="card_wraper">
                        {cardsInfoToShow.map(cardinfo =>
                            <div>
                                <Card
                                src={cardinfo.imgContentUrl}
                                title={cardinfo.title}
                                id={cardinfo.id}
                                handleClickCar={handleClickCard}
                                text={cardinfo.text}
                            ></Card>
                            </div>)}

                    </div>
                </div>}
            </div>

        </>
    )
}

function FichasOrMgaList({ handleBackBtn, cardInfo, text, bannerUrl }) {

    let dataListFiles;
    const bilpData = React.useContext(BiplContext);

    const year = bilpData[0];
    const cardSelected = bilpData[1];
    const commune = bilpData[2];

    let acts;
    let matrixOrPpts;

    try {
        dataListFiles = dataFilesInfo[commune][year][cardSelected];
    } catch {
        dataListFiles = false;
    }


    acts = dataListFiles.filter(item => item.name.includes('ACTA'));
    matrixOrPpts = dataListFiles.filter(item => !item.name.includes('ACTA'));

    return (

        <div id="fichasOrMga" className="seccion-content">

            <img alt="Banner Comuna" src={bannerUrl} className="img-banner"></img>
            <p style={{ fontSize: "21px", margin: "3% " }}>{cardInfo.text}</p>

            <i class="material-icons" style={{ fontSize: "40px", cursor: "pointer", marginLeft: "20px" }} onClick={handleBackBtn}>arrow_back</i>

            {dataListFiles ?

                cardSelected !== 'SC' && cardSelected !== 'RI' ?
                    <GenericList
                        filesNames={dataListFiles}
                    ></GenericList>
                    :
                    <div>
                        <h2 style={{textAlign:"center", margin:"2%x"}}>Actas</h2>
                        <GenericList
                            filesNames={acts}>
                        </GenericList>
                        <h2 style={{textAlign:"center", margin:"2%"}}>Matrices</h2>
                        <GenericList
                            filesNames={matrixOrPpts}>

                        </GenericList>
                    </div>

                :

                <div class="alert alert-info" role="alert"
                    style={{ marginRight: "10%", marginLeft: "10%", marginTop: "10%", fontSize: "100%" }}>
                    Estamos creando nuevo contenido para ti.
                </div>

            }
        </div>
    )
}

function Header() {

    let hamburger;
    let navLinks;
    let nav;
  
    let screenWidth = window.innerWidth;
  
    React.useEffect(() => {
        hamburger = document.querySelector('.hamburger');
        //navLinks = document.querySelector('.menu-list-container');
        navLinks = document.querySelector('.menu-horizontal');
        nav = document.querySelector('nav');
  
        screenWidth <= 768 ? setHamburger() : setNavViewLargeSize();
  
        hamburger.addEventListener('click', function () {
            navLinks.style.display === 'none' ? setCollapseSmallSize() : setHamburger();
        });
  
        window.addEventListener('resize', function () {
            screenWidth = window.innerWidth;
            screenWidth <= 768 ? setHamburger() : setNavViewLargeSize();
        });
  
    }, []);
  
    const setNavViewLargeSize = () => {
        navLinks.style.display = 'flex';
        hamburger.style.display = 'none';
  
        navLinks.style.flexDirection = "row";
        navLinks.style.justifyContent = "space-around";
        nav.style.height = "50px";
  
    }
    const setCollapseSmallSize = () => {
        navLinks.style.display = 'block';
        hamburger.style.display = 'block';
  
        navLinks.style.flexDirection = "column";
        nav.style.height = "440px";
    }
  
    const setHamburger = () => {
        navLinks.style.display = 'none';
        hamburger.style.display = 'block';
        nav.style.height = "45px";
        hamburger.style.backgroundColor = "#3c64ad";
    }
  
    return (
        <>
            <header>
                <div id="search_section">
                    <div id="img_container">
                        <img alt="Logo Nuestro desarrollo"
                            src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/07/xsellonuestro-e1664252298759-174x77.png.pagespeed.ic.UcxFWCIlvw.webp">
                        </img>
  
                    </div>
                    <div id="search_container">
                        <div>
                            <input type="text" placeholder="Search here...">
                            </input>
  
                            <i className="material-icons" >search</i>
                        </div>
  
                    </div>
                </div>
  
                <nav>
                    <div className="hamburger">&#9776;</div>
                    
  
                    <ul class="menu-horizontal">
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/">Nuestro Desarrollo
                            <i style={{ fontSize: "17px", marginLeft:"2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="curso-html.html">Quines Somos</a></li>
                                <li><a href="#">Soñemos Nuestro Desarrollo</a></li>
                                <li><a href="#">Glosario</a></li>
                                <li><a href="#">Preguntas Frecuentes</a></li>
                            </ul>  
                        </li>                          
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=10427">Sistema Distrital de Planeación
                            <i style={{ fontSize: "17px", marginLeft:"2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="curso-html.html">Normogramas</a></li>
                                <li><a href="#">Subsistemas</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=17763">Planeación del Desarrollo
                            <i style={{ fontSize: "17px", marginLeft:"2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="#">Planeación Regional</a></li>
                                <li><a href="#">Planeación Distrital</a></li>
                                <li><a href="#">Planeación del Desarrollo Local</a></li>
                            </ul>
                        </li>
                        <li style={{backgroundColor:"#3c64ad"}}>
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=624">BIPL
                            <i style={{ fontSize: "17px", marginLeft:"2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="#">Asesoría para la Gestión</a></li>
                                <li><a href="#">Gestión de Proyectos</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=1242">Comuniquémonos
                            <i style={{ fontSize: "17px", marginLeft:"2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="#">Agenda</a></li>
                                <li><a href="#">Boletín de Noticias</a></li>
                            </ul>
                        </li>
                        <li >
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=1240">Seguimiento
                            <i style={{ fontSize: "17px", marginLeft:"2px" }} class="material-icons">expand_more</i></a>
                        </li>
                    </ul>
                </nav>
  
            </header>
        </>
    )
  }

//Foooter
function Footer() {
    return (
        <footer>
            <div className="nav-container">
                <img src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/08/xLogo-ND-blanco-.png.pagespeed.ic.dfnqpdXrMG.webp"
                    alt="" />
                <div className="social-links">
                    <a target="blanket" href="https://www.facebook.com/AlcaldiadeMed" style={{ backgroundColor: "#3b5999" }}><i class="bi bi-facebook"></i> </a>
                    <a target="blanket" href="https://twitter.com/AlcaldiadeMed" style={{ backgroundColor: "#1da1f2" }} ><i class="bi bi-twitter" ></i> </a>
                    <a target="blanket" href="https://www.youtube.com/channel/UCAFLU70jPz4bODq_5BSWPIg" style={{ backgroundColor: "#cd201f" }}><i class="bi bi-youtube" ></i> </a>
                    <a target="blanket" href="https://www.linkedin.com/company/alcaldiademedellin/mycompany/" style={{ backgroundColor: "#0077b5" }}><i class="bi bi-linkedin"></i> </a>
                    <a target="blanket" href="https://www.instagram.com/alcaldiademed/" style={{ backgroundColor: "#f70166" }}><i class="bi bi-instagram" ></i> </a>
                </div>
            </div>
            <div className="nav-container">
                <h2>Enlaces de Interés <br></br></h2>
                <a href="https://www.medellin.gov.co/">Alcaldía de Medellín</a>
                <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=20226">Entrenamiento</a>
                <a href="https://www.medellin.gov.co/ndesarrollo/">Departamento Administrativo de Planeación</a>
                <a href="https://www.medellin.gov.co/irj/portal/medellin?NavigationTarget=navurl://73a000e1c5ca3867d46f06ab13aee55e">Presupuesto Participativo</a>
                <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=21856">Programa de Ejecución 2024-2027</a>
                <a href="https://mercurio.medellin.gov.co/mercurio/inicialPqr.jsp">Radicación de PQRSD</a>
            </div>
            <div className="nav-container">
                <h2>Contáctanos</h2>
                <a href=""><i class="material-icons" >location_on</i> Calle 44 N 52 – 165 Centro Administrativo la Alpujarra – Medellín, Colombia.</a>
                <a href=""><i class="material-icons"
                    style={{ backgroundColor: "white", color: "#3c64ad", borderRadius: "10%" }} >
                    call</i>Línea única de atención ciudadana: (574) 44 44 144.</a>
                <a href=""><i class="material-icons"
                    style={{ backgroundColor: "white", color: "#3c64ad", borderRadius: "10%" }}>
                    call</i>Línea gratuita nacional: 01 8000 411 144.</a>
            </div>
        </footer>
    )
}

//Main page
function Bipl() {

    const cardInfoList = [

        {
            title: "Recolección de insumos",
            id: "RI",
            text: "Es el momento en el que, bajo el direccionamiento del Departamento Administrativo de Planeación, con el apoyo de las dependencias y entes descentralizados, se procederá con el ejercicio de recolección de insumos mediante encuentros con participación abierta de la ciudadanía, donde se puntualizará en los instrumentos provistos y con los elementos necesarios para iniciar con la formulación de los proyectos de inversión. " +
                "Aquí se generan dos insumos técnicos: las matrices de recolección de dichos insumos donde los asistentes plasman sus propuestas y las actas que respaldan dichos espacios. ",
            imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/05/Recoleccion-de-insumos-card-scaled.jpg",
            bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-3-1536x227.jpg.pagespeed.ic.oOMYI0eAMO.webp"
        },
        {
            title: "Fichas Perfil",
            id: "FP",
            text: "Fichas formuladas bajo el direccionamiento técnico de la Unidad de Planeación del Desarrollo Municipal y Local – UPDML, de la Subdirección Social y Económica del Departamento Administrativo de Planeación, del Distrito Especial de Ciencia, Tecnología e Innovación de Medellín, con el acompañamiento de las distintas secretarias y entes descentralizados.",
            imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/12/5-Asi-va-la-ruta.jpg",
            bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-3-1536x227.jpg.pagespeed.ic.oOMYI0eAMO.webp"
        },
        {
            title: "Socialización",
            id: "SC",imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/05/Fichas-ppt-card-scaled.jpg",
            text: "Es el momento en el que, una vez se tengan los perfiles de proyecto formulados, las dependencias y entes descentralizados socializarán los proyectos en sesión a los Consejos Comunales y Corregimentales de Planeación, los cuales, atendiendo a las directrices técnicas impartidas por el  Departamento Administrativo de Planeación plasmaran ajustes a estos proyectos al nivel de ficha perfil, los cuales de ser considerados viables por las dependencias y entes descentralizados serán incorporados en los mismos. Aquí se generan dos insumos técnicos: los formatos de presentación de proyectos y las actas que respaldan dichos espacios. ",
            bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-6-1536x227.jpg.pagespeed.ic.xY8j4VdKRQ.webp"
        },
        {
            title: "Fichas PPT ajustadas",
            id: "FPPT",
            text: "Fichas resumen de los proyectos perfil que incorporan los ajustes realizados por los respectivos Concejos Comunales y Corregimentales de Planeación – CCCP en el marco de la Socialización de proyectos. ",
            imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/05/Socializacion-card-scaled.jpg",
            bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-6-1536x227.jpg.pagespeed.ic.xY8j4VdKRQ.webp"
        },
        {
            title: "Proyectos MGA",
            id: "MGA",
            text: "Proyectos formulados por las distintas secretarias y entes descentralizados que fueron priorizados en las respectivas votaciones de presupuesto participativo, registrados en la Unidad de Inversión Pública y Banco de Proyectos – UIPBP, bajo la Metodología General Ajustada – MGA, para su posterior ejecución. ",
            imgContentUrl: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/12/8-Instrumentos-PDL.jpg",
            bannerUlr: "https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-9-6-1536x227.jpg.pagespeed.ic.xY8j4VdKRQ.webp"
        },
    ]

    const [year, setYear] = React.useState('Seleccion el año de visualizacion');
    const [cardSelected, setCardSelected] = React.useState('');
    const [commune, setCommune] = React.useState('C7');
    const [selectedCardInfo, setSelectedCardInfo] = React.useState()

    const [currentPage, setCurrecPage] = React.useState('YearOptions')

    const handleOptionsChange = (e) => {
        setYear(e.target.value);
    }

    const handleClickCard = (e) => {

        setCardSelected(e.target.id);
        setSelectedCardInfo(cardInfoList.find(cardInfo => cardInfo.id === e.target.id))
        setCurrecPage('fichasOrMga');
    }

    const handleBackBtn = (e) => {
        setCurrecPage('YearOptions');
    }

    return (

        <div >
            <Header></Header>

            <BiplContext.Provider value={[year, cardSelected, commune]} >
                {currentPage === 'YearOptions' && <CardOptionsByYear
                    handleYear={handleOptionsChange}
                    handleClickCard={handleClickCard}
                    cardsInfo={cardInfoList}
                    text="A continuación, entrará los proyectos que fueron formulados durante la ruta de planeación del desarrollo local y presupuesto participativo bajo lo establecido en el decreto 0146 de 2022.  "
                    bannerUrl="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-7-2.jpg.pagespeed.ic.QItVp8MXoQ.webp"
                ></CardOptionsByYear>}


                {currentPage === 'fichasOrMga' && <FichasOrMgaList
                    handleBackBtn={handleBackBtn}
                    cardInfo={selectedCardInfo}
                    bannerUrl="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2022/09/xComuna-7-2.jpg.pagespeed.ic.QItVp8MXoQ.webp"
                ></FichasOrMgaList>}

            </BiplContext.Provider>

            <Separator></Separator>

            <Footer></Footer>
        </div>
    )
}

export default Bipl;

ReactDOM.render(
    <Bipl />,
    rootElement
)