import * as React from 'react';
import { useContext, CSSProperties, FunctionComponent } from 'react';
import { EditorViewContext } from '../../contexts/EditorViewContext';
import { WritingMode } from '../../config/writingMode';

import './LinesContent.css';

type Props = {
  //   renderingContext: RenderingContext;
};

export const LinesContent: FunctionComponent<Props> = (props) => {
  const { children } = props;
  const { renderingContext: ctx, writingMode } = useContext(EditorViewContext);

  if (!ctx) {
    return <></>;
  }

  const adjustedScrollTop = ctx.scrollTop - ctx.bigNumbersDelta;
  const height = Math.min(ctx.scrollHeight, 1000000);
  const width = ctx.scrollWidth;
  const left = ctx.scrollLeft;

  const style =
    writingMode === WritingMode.LeftToRightHorizontalWriting
      ? { top: `${-adjustedScrollTop}px`, left: `${-left}px` }
      : { right: `${-adjustedScrollTop}px`, top: `${-left}px` };

  return (
    <div className={'lines-content'} style={style}>
      {children}
    </div>
  );
};