import React from 'react';

import useStore from '../store';
import useActions from '../actions';

import NavbarComponent from '../components/Navbar';
import Search from './Search';
import AnnotationList from '../components/AnnotationList';
import Thumbnails from './Thumbnails';

const Navbar: React.FunctionComponent = () => {
  const [{ navbarState, displayMode }, dispatch] = useStore();
  const { setNavbar } = useActions(dispatch);

  const onClick = (state: string): void => {
    if (state === navbarState) {
      setNavbar('');
    } else {
      setNavbar(state);
    }
  };

  const transferProps = (role: string): any => ({
    isActive: navbarState === role,
    close: (): void => { onClick(''); },
  });

  return (
    <NavbarComponent
      onClick={onClick}
      navbarState={navbarState}
      displayMode={displayMode}
    >
      <Search />
      <AnnotationList {...transferProps('annotations')} />
      <Thumbnails />
    </NavbarComponent>
  );
};

export default Navbar;