import * as React from 'react' ; import classnames from 'classnames' ; import { Container } from '../../modules/Container/Container' ; import ILocalContainerProps from '../../../common/structures/ILocalContainerProps' ; import AccordionItem from './AccordionItem' ; export interface Props extends ILocalContainerProps { allowMultipleOpenItems ? : boolean ; clickArea ? : 'icon' | 'all' ; } const Accordion = ( { allowMultipleOpenItems , children , className , clickArea = 'icon' , container , id , style , } ) => { const [ lastOpenedItemId , setLastOpenedItemId ] = React . useState < string | undefined > ( ) ; const [ openedItemsLookup , setOpenedItemsLookup ] = React . useState < { [ key ] : boolean ; } > ( { } ) ; const onToggle = ( itemId ) => { setLastOpenedItemId ( ( lastOpenedItemId ) => itemId === lastOpenedItemId ? undefined : itemId ) ; if ( itemId ) { setOpenedItemsLookup ( ( openedItemsLookup ) => ( { ... openedItemsLookup , [ itemId ] : ! openedItemsLookup [ itemId ] , } ) ) ; } } ; const isItemOpen = ( itemId ) => { return allowMultipleOpenItems ? itemId && ! ! openedItemsLookup [ itemId ] : itemId === lastOpenedItemId ; } ; return ( < Container { ... container } > < div className = { classnames ( 'Accordion' , className ) } id = { id } style = { style } > { React . Children . map ( children , ( child , index ) => { if ( ! child ) { return ; } const childPlus = child ; return ( < AccordionItem itemId = { `item-${ index }` } clickArea = { clickArea } onToggle = { onToggle } opened = { isItemOpen ( `item-${ index } `)} {...childPlus.props}>
							<>
								{/* directly render children, if possible, thereby removing the wrapper (aka 'child') */}
								{childPlus?.props?.children || child}
							</>
						</AccordionItem>);
        })}
			</div>
		</Container>);
};
export default Accordion;
