import React from 'react';
import queryString from 'query-string';

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

import NavbarComponent from '../components/Navbar';
import Search from './Search';
import Thumbnails from './Thumbnails';
import AnnotationList from './AnnotationList';
import { downloadFileWithUri } from '../helpers/utility';

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

  const onClick = (state: string): void => {
    switch (state) {
      case 'export': {
        const parsed = queryString.parse(window.location.search);
        const fileName = atob(parsed.token as string);
        const path = `/api/v1/output.pdf?f=${parsed.token}`;
        downloadFileWithUri(fileName, path);
        break;
      }
      case navbarState:
        setNavbar('');
        break;
      default:
        setNavbar(state);
        break;
    }
  };

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

export default Navbar;