import React , { useState } from 'react' ; import { useAppSelector , useAppDispatch } from '../../state-management/hooks' ; import { setSearchValue } from '../../state-management/slices/AtomNetworkSlice' ; const AtomNetworkLegend = ( ) => { const dispatch = useAppDispatch ( ) ; const snapshotHistory = useAppSelector ( state => state . snapshot . snapshotHistory ) ; const renderIndex = useAppSelector ( state => state . snapshot . renderIndex ) ; const filteredCurSnap = snapshotHistory [ renderIndex ] . filteredSnapshot ; const atomAndSelectorArr = Object . entries ( filteredCurSnap ) ; const [ atomList ] = useState ( atomAndSelectorArr . filter ( ( [ isAtom , obj ] ) => ! obj . nodeDeps . length ? isAtom : null ) ) ; const [ selectorList ] = useState ( atomAndSelectorArr . filter ( ( [ isSelector , obj ] ) => obj . nodeDeps . length ? isSelector : null ) ) ; const [ showAtomMenu , setShowAtomMenu ] = useState ( false ) ; const [ showSelectorMenu , setShowSelectorMenu ] = useState ( false ) ; const [ atomButtonClicked , setAtomButtonClicked ] = useState < boolean > ( false ) ; const [ selectorButtonClicked , setSelectorButtonClicked ] = useState < boolean > ( false ) ; const handleChange = ( e ) => { dispatch ( setSearchValue ( e . target . value ) ) ; } ; function openDropdown ( e ) { const target = e . target as Element ; if ( target . id === 'AtomP' ) { if ( showSelectorMenu ) setShowSelectorMenu ( false ) ; setShowAtomMenu ( ! showAtomMenu ) ; dispatch ( setSearchValue ( '' ) ) ; setAtomButtonClicked ( true ) ; setSelectorButtonClicked ( false ) ; } else if ( target . id === 'SelectorP' ) { if ( showAtomMenu ) setShowAtomMenu ( false ) ; setShowSelectorMenu ( ! showSelectorMenu ) ; dispatch ( setSearchValue ( '' ) ) ; setSelectorButtonClicked ( true ) ; setAtomButtonClicked ( false ) ; } } return ( < div className = "LegendContainer" > < div className = "RecoilSearch" > < input id = "networkSearch" type = "text" placeholder = "search for state" onChange = { handleChange } / > < /div> < div className = "AtomNetworkLegendWithSearch" > < div className = "AtomLegend" > < /div> { } < button onClick = { openDropdown } id = "AtomP" className = { atomButtonClicked ? "AtomP atomSelected" : "AtomP atomLegendDefault" } > ATOM < /button> < div className = "SelectorLegend" > < /div>  < button onClick = { openDropdown } id = "SelectorP" className = { selectorButtonClicked ? "SelctorP selectorSelected" : "SelectorP selectorLegendDefault" } > SELECTOR < /button> { } { showAtomMenu && < div className = "AtomDropdown" > { atomList . map ( ( [ atom , atomObj ] , i ) => { return ( < div className = "dropDownButtonDiv" > < button key = { i } id = { `atom-drop${ i }` } className = 'atom-class atomDropDown' onClick = { ( event ) => { if ( ! ( event . target as HTMLInputElement ) . classList . contains ( 'atomSelected' ) && ( event . target as HTMLInputElement ) . classList . contains ( 'atomNotSelected' ) ) { ( event . target as HTMLInputElement ) . classList . replace ( 'atomNotSelected' , 'atomSelected' ) ; } else if ( ! ( event . target as HTMLInputElement ) . classList . contains ( 'atomSelected' ) && ! ( event . target as HTMLInputElement ) . classList . contains ( 'atomNotSelected' ) ) { ( event . target as HTMLInputElement ) . classList . add ( 'atomSelected' ) ; } document . querySelectorAll ( '.atom-class' ) . forEach ( item => { if ( item . id !== `atom-drop${ i }` && item . classList . contains ( 'atomSelected' ) ) { item . classList . replace ( 'atomSelected' , 'atomNotSelected' ) ; } else if ( item . id !== `atom-drop${ i }` && ! item . classList . contains ( 'atomNotSelected' ) ) { item . classList . add ( 'atomNotSelected' ) ; } } ) ; dispatch ( setSearchValue ( ( event . target as Element ) . innerHTML ) ) ; } } > { atom } < /button></div > ) ; } ) } < /div>} { showSelectorMenu && < div className = "SelectorDropdown" > { selectorList . map ( ( [ selector , selectorObj ] , i ) => { return ( < div className = "dropDownButtonDiv" > < button key = { i } id = { `selector-drop${ i }` } className = 'selector-class selectorDropDown' onClick = { ( event ) => { if ( ! ( event . target as HTMLInputElement ) . classList . contains ( 'selectorSelected' ) && ( event . target as HTMLInputElement ) . classList . contains ( 'selectorNotSelected' ) ) { ( event . target as HTMLInputElement ) . classList . replace ( 'selectorNotSelected' , 'selectorSelected' ) ; } else if ( ! ( event . target as HTMLInputElement ) . classList . contains ( 'selectorSelected' ) && ! ( event . target as HTMLInputElement ) . classList . contains ( 'selectorNotSelected' ) ) { ( event . target as HTMLInputElement ) . classList . add ( 'selectorSelected' ) ; } document . querySelectorAll ( '.selector-class' ) . forEach ( item => { if ( item . id !== `selector-drop${ i }` && item . classList . contains ( 'selectorSelected' ) ) { item . classList . replace ( 'selectorSelected' , 'selectorNotSelected' ) ; } else if ( item . id !== `selector-drop${ i }` && ! item . classList . contains ( 'selectorNotSelected' ) ) { item . classList . add ( 'selectorNotSelected' ) ; } } ) ; dispatch ( setSearchValue ( ( event . target as Element ) . innerHTML ) ) ; } } > { selector } < /button></div > ) ; } ) } < /div>} < /div> < /div>); } ; export default AtomNetworkLegend ;