import React, { RefObject, useContext, useState } from 'react';

export interface Dimensions {
  width: number;
  height: number;
}

export interface IDropdownContextProps {
  visible?: boolean;
  toggleRef?: RefObject<HTMLDivElement>;
  setVisible?(bool: boolean): void;
  setToggleRef?(ref: RefObject<HTMLDivElement>): void;
}

export const DropdownContext = React.createContext<Partial<IDropdownContextProps>>({});

export const DropdownProvider: React.FC<IDropdownContextProps> = (props) => {
  const initialState: IDropdownContextProps = {
    visible: false,
    toggleRef: null,
    setVisible(bool: boolean) {
      setState((prevState) => ({ ...prevState, visible: bool }));
    },
    setToggleRef(ref: RefObject<HTMLDivElement>) {
      setState((prevState) => ({ ...prevState, toggleRef: ref }));
    },
  };
  const [state, setState] = useState(initialState);
  return <DropdownContext.Provider value={state}>{props.children}</DropdownContext.Provider>;
};

export function useDropdownContext() {
  const context = useContext(DropdownContext);
  return context;
}