import React from 'react';

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

import AnnotationListComp from '../components/AnnotationList';

const AnnotationList: React.FunctionComponent = () => {
  const [{
    navbarState,
    annotations,
    viewport,
    scale,
    pdf,
  }, dispatch] = useStore();
  const { setNavbar } = useActions(dispatch);

  return (
    <AnnotationListComp
      annotations={annotations}
      viewport={viewport}
      scale={scale}
      pdf={pdf}
      isActive={navbarState === 'annotations'}
      close={(): void => { setNavbar(''); }}
    />
  );
};

export default AnnotationList;