import { openToolbarWidth, closedToolbarWidth } from '../styles/dimensions';
import { useMemo, useState, useEffect, createContext } from 'react';
import useStorageBackedState from './useStorageBackedState';
import { CommandCategory } from '../types';

export const useScreenConfiguration = () => {
  const [toolbarOpen, setToolbarOpen] = useState(false);
  const [commandViewHeight, setCommandViewHeight] = useStorageBackedState(0, 'feb-14-2021-command-view-height');
  const [codeWindowOpen, setCodeWindowOpen] = useState(true);
  const [windowInnerWidth, setWindowInnerWidth] = useState(window.innerWidth);

  const timelineViewportWidth = useMemo(
    () => {
      let output = windowInnerWidth;
      if (toolbarOpen) {
        output -= openToolbarWidth;
      } else {
        output -= closedToolbarWidth;
      }
      return output;
    },
    [windowInnerWidth, toolbarOpen]
  );

  useEffect(
    () => {
      const updateInnerWidth = () => {
        if (window.innerWidth !== windowInnerWidth) {
          setWindowInnerWidth(window.innerWidth);
        }
      };

      window.addEventListener('resize', updateInnerWidth);

      updateInnerWidth();
      return () => {
        window.removeEventListener('resize', updateInnerWidth);
      }
    },
    [setWindowInnerWidth, windowInnerWidth]
  );

  const [libraryFilterState, setLibraryFilterState] = useState<CommandCategory | null>(null);

  return {
    timelineViewportWidth,

    toolbarOpen,
    setToolbarOpen,

    codeWindowOpen,
    setCodeWindowOpen,

    commandViewHeight,
    setCommandViewHeight,

    libraryFilterState,
    setLibraryFilterState
  }
}

export const ScreenConfigurationContext = createContext<ReturnType<typeof useScreenConfiguration>>(undefined as never);