import React from 'react';

import { ANNOTATION_TYPE } from '../constants';
import Head from './AnnotationListHead';
import Drawer from '../components/Drawer';
import Body from '../components/AnnotationList';

import useStore from '../store';

import { Container } from '../global/sidebarStyled';

const ANNOT_TYPE_ARRAY = Object.values(ANNOTATION_TYPE);

const AnnotationList: React.FC = () => {
  const [{ navbarState, annotations }] = useStore();

  const isActive = navbarState === 'annotations';

  return (
    <Drawer anchor="right" open={isActive}>
      <Container>
        <Head />
        <Body
          annotations={annotations.filter((ele: AnnotationType) =>
            ANNOT_TYPE_ARRAY.includes(ele.obj_type)
          )}
          isActive={isActive}
        />
      </Container>
    </Drawer>
  );
};

export default AnnotationList;
