import * as React from 'react';
import {
  useContext,
  createContext,
  FunctionComponent,
  useState,
  useEffect,
} from 'react';
import { EditorViewContext } from './EditorViewContext';
import {
  EditorLayoutInfo,
  EditorOption,
} from '../vs/editor/common/config/editorOptions';

const initialState = {
  layoutInfo: undefined as unknown as EditorLayoutInfo,
};

export const LayoutInfoContext = createContext(initialState);

type Props = {
  // nothing
};

export const LayoutInfoProvider: FunctionComponent<Props> = (props) => {
  const { children } = props;

  const { editor } = useContext(EditorViewContext);

  const [layoutInfo, setLayoutInfo] = useState(
    editor.getOption(EditorOption.layoutInfo)
  );

  useEffect(() => {
    editor.onDidLayoutChange((evt) => {
      const layoutInfo = evt;
      setLayoutInfo(layoutInfo);
    });
  }, [editor]);

  const value = {
    layoutInfo,
  };

  return (
    <LayoutInfoContext.Provider value={value}>
      {children}
    </LayoutInfoContext.Provider>
  );
};