import * as React from 'react';
import { FunctionComponent, useMemo, CSSProperties, useEffect } from 'react';

import { FontInfo } from '../../vs/editor/common/config/fontInfo';
import { ViewLine } from '../viewLine/ViewLine';
import { WritingMode } from '../editor';
import { useContext } from 'react';
import { EditorViewContext } from '../../contexts/EditorViewContext';

import './ViewCursors.css';
import { FontInfoContext } from '../../contexts/FontInfoContext';
import { from } from '../../utilities';
import { PrimaryCursor } from '../primaryCursor';
import { CursorPositionContext } from '../../contexts/CursorPositionContext';

type Props = {};

export const ViewCursors: FunctionComponent<Props> = (props) => {
  const {
    editor,
    renderingContext: ctx,

    selection,
    selectionStart,
    setSelectionStart,
  } = useContext(EditorViewContext);

  const { cursorPosition } = useContext(CursorPositionContext);
  const { fontInfo } = useContext(FontInfoContext);

  const content = useMemo(() => {
    if (!ctx) {
      return '';
    }

    if (!cursorPosition) {
      return '';
    }

    const { viewportData } = ctx;
    const viewLineRenderingData = viewportData.getViewLineRenderingData(
      cursorPosition.lineNumber
    );
    return viewLineRenderingData.content.replace(/\s/g, '\xa0');
  }, [ctx, cursorPosition]);

  const scroll = useMemo(() => {
    if (!ctx) {
      return 0;
    }

    if (!cursorPosition) {
      return 0;
    }

    const { viewportData } = ctx;

    const { startLineNumber, endLineNumber, relativeVerticalOffset } =
      viewportData;

    const lineIndex = cursorPosition.lineNumber - startLineNumber;

    return relativeVerticalOffset[lineIndex];
  }, [ctx, cursorPosition]);

  return (
    <div className={'view-cursors'}>
      {cursorPosition && (
        <PrimaryCursor
          scroll={scroll}
          position={cursorPosition.column}
          lineText={content}
          lineHeight={fontInfo.lineHeight}
        />
      )}
    </div>
  );
};