import React, {useState, useEffect} from 'react';
import { Panel, PanelGroup } from 'react-bootstrap';
import useAccordionState from '../../hooks/useAccordionState';
import InformationContent from './InformationContent';
import Spinner from "react-spinkit";


export default function InformationPanelContainer({ items = [], authLevel, additionalData = {}, infoLoading = []}) {
    const [selectedPanel, togglePanel] = useAccordionState();
    const [firstToggle, setFirstToggle] = useState(false);
    // Open first result on startup.
    useEffect(() => {
        if (!firstToggle && items.length > 0) {
            setFirstToggle(true);
            togglePanel("0");

        }
    }, [items]);
    return (<PanelGroup
        onSelect={i => togglePanel(i)}
    >{
            items.map((r, index) => {
                let header = (<div
                    onClick={() => { togglePanel(index); }}
                    className={`information-panel-title ${selectedPanel[index] ? 'selected' : 'unselected'}`}>
                    {r.parcelle}
                    {infoLoading[r?.parcelle] ? <div style={{ "float": "right" }}><Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /></div> : null}
                </div>);
                return (
                    <Panel
                        expanded={!!selectedPanel[index.toString()]}
                        className="mapstore-side-card ms-sm"
                        collapsible
                        eventKey={index.toString()}
                        header={header}>
                        <InformationContent {...r} authLevel={authLevel} additionalData={additionalData}/>
                    </Panel>
                );
            })
        }
    </PanelGroup>);
}