import React from 'react';
import dayjs from 'dayjs';

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

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

type Props = {
  type: string;
  page?: number;
  title?: string;
  date?: string;
  showPageNum?: boolean;
};

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

    scrollIntoView(ele);
  };

  return (
    <>
      {showPageNum ? (
        <>
          <Divider orientation="horizontal" />
          <PageNumber>{`Page ${page}`}</PageNumber>
        </>
      ) : null}
      <AnnotationBox onClick={handleClick}>
        <Group>
          <Icon glyph={data[type].icon} />
          {data[type].text}
        </Group>
        <Group>
          <span>{title || ''}</span>
          <span>
            {date && dayjs(date?.replace('_', ' ')).format('YYYY/MM/DD HH:mm')}
          </span>
        </Group>
      </AnnotationBox>
    </>
  );
};

AnnotationItem.defaultProps = {
  page: 0,
  title: '',
  date: '',
  showPageNum: false,
};

export default AnnotationItem;