import * as React from 'react';
import { useContext } from 'react';
import { useState, useEffect, CSSProperties, FunctionComponent } from 'react';
import { FontInfoContext } from '../../contexts/FontInfoContext';
import { LayoutInfoContext } from '../../contexts/LayoutInfoContext';

import './MarginViewOverlays.css';

type Props = {};

export const MarginViewOverlays: FunctionComponent<Props> = (props) => {
  const { children } = props;
  const { fontInfo } = useContext(FontInfoContext);
  const { layoutInfo } = useContext(LayoutInfoContext);

  const [lineHeight, setLineHeight] = useState(10);

  useEffect(() => {
    if (fontInfo) {
      const { lineHeight } = fontInfo;
      setLineHeight(lineHeight);
    }
  }, [fontInfo]);

  console.log(`lineNumbersWidth:${layoutInfo.lineNumbersWidth}`);
  const style: CSSProperties = {
    lineHeight: `${lineHeight}px`,
    width: `${layoutInfo.lineNumbersWidth}`,
  };

  return (
    <div className={'margin-view-overlays'} style={style}>
      {children}
    </div>
  );
};