import React from 'react';

import Icon from '../Icon';
import Drawer from '../Drawer';
import Typography from '../Typography';
import Divider from '../Divider';

import { AnnotationBox, PageNumber, Content, Info } from './styled';
import { Separator } from '../../global/otherStyled';
import { Wrapper, Head, Body, IconWrapper } from '../../global/sidebarStyled'

type Props = {
  isActive?: boolean;
  close: () => void;
};

const Annotations: React.FunctionComponent<Props> = ({
  isActive = false,
  close,
}) => {
  return (
    <Drawer anchor="right" open={isActive}>
      <Wrapper>
        <Head>
          <IconWrapper>
            <Icon glyph="right-back" onClick={close} />
          </IconWrapper>
          <Separator />
          <IconWrapper>
            <Icon glyph="sort" />
          </IconWrapper>
          <IconWrapper>
            <Icon glyph="annotation-export" />
          </IconWrapper>
          <IconWrapper>
            <Icon glyph="import" />
          </IconWrapper>
        </Head>
        <Body>
          <Typography light>2 Annotations</Typography>
          <Divider orientation="horizontal" />
          <PageNumber>Page 1</PageNumber>
          <AnnotationBox>
            <Content>
              If the Photographer fails to appear at the place and time specified above, the deposit shall be refunded to the Client.
            </Content>
            <Info>
              Gameboy
              <Separator />
              2016/07/28 18:18
            </Info>
          </AnnotationBox>
        </Body>
      </Wrapper>
    </Drawer>
  );
};

export default Annotations;
