import React from 'react';

import Icon from '../Icon';
import Divider from '../Divider';
import { scrollIntoView } from '../../helpers/utility';

import data from './data';
import { PageNumber, AnnotationBox } from './styled';

type Props = {
  type: string;
  page?: number;
  bdcolor: string;
  getText: () => Promise<any>;
  showPageNum?: boolean;
  transparency: number;
};

const AnnotationItem = ({
  type,
  page,
  showPageNum,
}: Props): React.ReactElement => {
  const handleClick = (): void => {
    const ele: HTMLElement | null = document.getElementById(`page_${page}`);

    if (ele) {
      scrollIntoView(ele);
    }
  };

  return (
    <>
      {showPageNum ? (
        <>
          <Divider orientation="horizontal" />
          <PageNumber>{`Page ${page}`}</PageNumber>
        </>
      ) : null}
      <AnnotationBox onClick={handleClick}>
        <Icon glyph={data[type].icon} />
        {data[type].text}
      </AnnotationBox>
    </>
  );
};

export default AnnotationItem;