// import * as React from 'react';
import React, {
  createContext,
  useMemo,
  useState,
  FunctionComponent,
  useEffect,
} from 'react';
import { EditorOptions } from '../components/editor/Editor';
import {
  StandaloneCodeEditor,
  RenderingContext,
  Selection,
  IPosition,
} from '../vs';
import { useHotkeys } from '@ishikawa_masashi/react-hooks';

enum WritingMode {
  LeftToRightHorizontalWriting,
  LeftToRightVerticalWriting,
  RightToLeftHorizontalWriting,
  RightToLeftVerticalWriting,
}

// export const enum Position {
//   LEFT,
//   RIGHT,
//   BOTTOM,
// }

// export enum ProductName {
//   ElectricTypewriter = 'Electric Typewriter',
//   QBasic = 'QBasic',
//   PocketScheme = 'Pocket Scheme',
//   Monaka = 'Monaka',
// }

export type AppState = {
  status: { line: number; column: number };
};

// export type SideBarState = {
//   hidden: boolean;
//   position: Position;
//   width: number;
// };

export type WidthKey = 'width' | 'height';
export type HeightKey = 'width' | 'height';
export type TopKey = 'top' | 'right';
export type LeftKey = 'left' | 'top';

const initialState = {
  editor: undefined as unknown as StandaloneCodeEditor,
  writingMode: WritingMode.LeftToRightHorizontalWriting,
  renderingContext: undefined as RenderingContext | undefined,

  selection: undefined as Selection | undefined,
  selectionStart: undefined as IPosition | undefined,
  setSelectionStart: (selectionStart: IPosition | undefined) => {},

  leftToRightHorizontalWriting: true,
  rightToLeftVerticalWriting: false,
  wordWrap: 'off',
  scrollLeft: 0,

  widthKey: 'width' as WidthKey,
  heightKey: 'height' as WidthKey,
  topKey: 'top' as TopKey,
  leftKey: 'left' as LeftKey,
};

export const EditorViewContext = createContext(initialState);

const initialiCondition = {
  mediaType: ['comic', 'video'],
  title: '',
  // fav: null,
  // authors: [],
  // tags: [],
};

const initialSetting = {
  mode: 'list',
  // selectedId: null,
  // videoDir: null,
  // comicDir: null,
  condition: initialiCondition,
  sorter: { key: 'registeredAt', value: 'desc' },
  pager: { current: 1, size: 10 },
  autoFullscreen: true,
  movingStep: { video: 10, comic: 2 },
};

type Props = {
  editor: StandaloneCodeEditor;
  options?: EditorOptions;
  // productName: ProductName;
};

export const EditorViewProvider: FunctionComponent<Props> = (props) => {
  const { children, options = {}, editor } = props;
  const {
    writingMode = WritingMode.LeftToRightHorizontalWriting,
    wordWrap = 'off',
  } = options;

  const [renderingContext, setRenderingContext] = useState<RenderingContext>();

  const [selection, setSelection] = useState<Selection>();
  const [selectionStart, setSelectionStart] = useState<IPosition | undefined>();

  const [initialized, changeInitialized] = useState(false);
  const [setting, changeSetting] = useState(initialSetting);

  const [scrollLeft, setScrollLeft] = useState(0);

  const initializeSetting = () => {
    //   const persistedSetting = await loadSetting();
    //   changeSetting({ ...setting, ...persistedSetting });
    // changeInitialized(true);
    // setTabGroups(tabGroups => [activeTabGroup]);
  };

  const leftToRightHorizontalWriting = useMemo(
    () => writingMode === WritingMode.LeftToRightHorizontalWriting,
    [writingMode]
  );

  const rightToLeftVerticalWriting = useMemo(
    () => writingMode === WritingMode.RightToLeftVerticalWriting,
    [writingMode]
  );

  const widthKey = useMemo(
    (): WidthKey => (leftToRightHorizontalWriting ? 'width' : 'height'),
    [leftToRightHorizontalWriting]
  );

  const heightKey = useMemo(
    (): HeightKey => (leftToRightHorizontalWriting ? 'height' : 'width'),
    [leftToRightHorizontalWriting]
  );

  const topKey = useMemo(
    (): TopKey => (leftToRightHorizontalWriting ? 'top' : 'right'),
    [leftToRightHorizontalWriting]
  );

  const leftKey = useMemo(
    (): LeftKey => (leftToRightHorizontalWriting ? 'left' : 'top'),
    [leftToRightHorizontalWriting]
  );

  useEffect(() => {
    if (renderingContext) {
      setScrollLeft(renderingContext.scrollLeft);
    }
  }, [renderingContext]);

  useEffect(() => {
    editor.onDidRender((evt) => {
      setRenderingContext(evt);
    });

    editor.onDidChangeCursorSelection((evt) => {
      const { selection } = evt;
      console.log('Change Selection!');

      setSelection(selection);
    });

    return () => {
      // editor.dispose();
    };
  }, [editor]);

  useHotkeys('Control+z', (evt) => {
    evt.stopPropagation();
    evt.preventDefault();
    editor.focus();
    editor.trigger(undefined, 'undo', undefined);
  });

  // revealHorizontalRightPadding
  // _computeScrollLeftToReveal
  const value = {
    editor,
    renderingContext,
    selection,
    writingMode,
    selectionStart,
    setSelectionStart,
    leftToRightHorizontalWriting,
    rightToLeftVerticalWriting,
    wordWrap,
    scrollLeft,

    widthKey,
    heightKey,
    topKey,
    leftKey,
  };

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