import type { FC } from 'react';
import { useRef, useEffect, useCallback, useState } from 'react';
import type {
  AnnotationProps,
  IAnnotationData,
  IAction,
} from './typeDefinition';
import React from 'react';
import { Annotator, Action } from 'poplar-annotation';
import './index.less';

const Annotation: FC<AnnotationProps> = (props: AnnotationProps) => {
  const {
    annotationData,
    action,
    onTextSelected,
    onLabelDoubleClicked,
    onLabelRightClicked,
    onTwoLabelsClicked,
    onConnectionDoubleClicked,
    onConnectionRightClicked,
    onAnnotatorUpdate,
  } = props;
  let annotator: any = useRef(null);
  const [store, setStore] = useState(null);

  const actionEvent = useCallback(() => {
    if (annotator.current) {
      annotator.current.on(
        'textSelected',
        (startIndex: number, endIndex: number) => {
          // 输出用户选取的索引
          if (onTextSelected) onTextSelected(startIndex, endIndex);
        },
      );
      annotator.current.on('labelDoubleClicked', (id: number, e: Event) => {
        // 输出用户双击的label的ID, 点击时鼠标的event
        if (onLabelDoubleClicked) onLabelDoubleClicked(id, e);
      });
      annotator.current.on('labelRightClicked', (id: number, e: Event) => {
        // 输出用户点击的label的ID, 点击时鼠标的event
        if (onLabelRightClicked) onLabelRightClicked(id, e);
      });
      annotator.current.on(
        'twoLabelsClicked',
        (first: number, second: number) => {
          // 输出用户选取的两个label的ID
          if (onTwoLabelsClicked) onTwoLabelsClicked(first, second);
        },
      );
      annotator.current.on(
        'connectionDoubleClicked',
        (id: number, e: Event) => {
          // 输出用户点击的Connection的ID, 点击鼠标的event
          if (onConnectionDoubleClicked) onConnectionDoubleClicked(id, e);
        },
      );
      annotator.current.on('connectionRightClicked', (id: number, e: Event) => {
        // 输出用户点击的Connection的ID, 点击鼠标的event
        if (onConnectionRightClicked) onConnectionRightClicked(id, e);
      });
    }
  }, [
    onTextSelected,
    onLabelDoubleClicked,
    onLabelRightClicked,
    onTwoLabelsClicked,
    onConnectionDoubleClicked,
    onConnectionRightClicked,
  ]);

  useEffect(() => {
    if (annotationData && !annotator.current) {
      annotator.current = new Annotator(
        annotationData as IAnnotationData,
        document.getElementById('annotation-container') as HTMLElement,
        { contentEditable: false },
      );
      actionEvent();
    }
  }, [actionEvent, annotationData]);

  useEffect(() => {
    if (action?.type) {
      const { type = '', data } = action as IAction;
      switch (type) {
        case 'LABELCREATE':
          annotator.current.applyAction(
            Action.Label.Create(
              data.categoryId as number,
              data.startIndex as number,
              data.endIndex as number,
            ),
          );
          break;
        case 'LABELUPDATE':
          annotator.current.applyAction(
            Action.Label.Update(
              data.labelId as number,
              data.categoryId as number,
            ),
          );
          break;
        case 'LABELDELETE':
          annotator.current.applyAction(
            Action.Label.Delete(data.labelId as number),
          );
          break;
        case 'CONNECTIONCREATE':
          annotator.current.applyAction(
            Action.Connection.Create(
              data.categoryId as number,
              data.fromId as number,
              data.toId as number,
            ),
          );
          break;
        case 'CONNECTIONUPDATE':
          annotator.current.applyAction(
            Action.Connection.Update(
              data.connectionId as number,
              data.categoryId as number,
            ),
          );
          break;
        case 'CONNECTIONDELETE':
          annotator.current.applyAction(
            Action.Connection.Delete(data.connectionId as number),
          );
          break;
        default:
          break;
      }
      setStore(annotator.current.store.json);
    }
  }, [action]);

  useEffect(() => {
    if (store && onAnnotatorUpdate) onAnnotatorUpdate(store);
  }, [store, onAnnotatorUpdate]);

  return <div id="annotation-container"></div>;
};
export default Annotation;