import React from 'react';
import { NodeNavButton } from './NodeNavButton';


 export const NodeNav = (props) => {
     const {manifest, setPreviousNode, loadStartState} = props;
     const {navigationStack, activeNode} = manifest;

     const itemStyles: React.CSSProperties = {
      alignItems: 'center',
      // background: DefaultPalette.themePrimary,
      // color: DefaultPalette.white,
      display: 'flex',
      height: 50,
      justifyContent: 'center',
      width: 50,
    };
 
    return (
        <>
        <props.buttonComponent onClick={() => loadStartState()}>Menu</props.buttonComponent>
            {navigationStack && !!navigationStack.length && <props.buttonComponent onClick={setPreviousNode}>Previous</props.buttonComponent>}
            {activeNode && activeNode.navs ? activeNode.navs.map((but, i) =>(
              <NodeNavButton 
                  key={i} 
                  but={but}
                  {...props} 
                  style={{}}
                  />
              )): null}
        </>
    );
};