import { useCallback, useEffect, useRef } from 'react';
import useSWR from 'swr';
import { useWindowSize } from 'hooks/use-window-size';
import { setStorage, getStorage } from 'helpers/storage';

const key = 'dragable-menu-width';
export const MIN_WIDTH = 240;
export const MAX_WIDTH = 600;

const COLLAPSED_WIDTH = 24;

export const useDragableWidth = () => {
  const runTimeWidthRef = useRef(null);
  const { data, mutate } = useSWR<number>(key, getStorage);
  const windowSize = useWindowSize();
  const isCollapsed = data <= COLLAPSED_WIDTH;

  const updateWidth = (size) => {
    setStorage(key, size);
    mutate();
    runTimeWidthRef.current = size;
  };

  const toggleCollapsed = useCallback(
    (collapsed = null) => {
      const isBool = typeof collapsed === 'boolean';
      const nextCollapsed = isBool ? collapsed : !isCollapsed;
      const nextWidth = nextCollapsed ? COLLAPSED_WIDTH : MIN_WIDTH;
      setStorage(key, nextWidth);
      mutate();
      runTimeWidthRef.current = nextWidth;
    },
    [isCollapsed, mutate]
  );

  useEffect(() => {
    mutate();

    return () => {
      runTimeWidthRef.current = null;
    };
  }, [mutate]);

  useEffect(() => {
    if (!windowSize.width) return;
    if (windowSize.width <= 765) {
      toggleCollapsed(true);
    }
  }, [windowSize.width, toggleCollapsed]);

  return {
    width: data,
    isCollapsed,
    toggleCollapsed,
    updateWidth,
  };
};