import React, { ReactNode } from 'react';
import { useSettings } from 'hooks/settings';

export const SettingsContext = React.createContext<SettingsContextType>({
  isSideBarOpen: false,
  isSideBarCollapsed: false,
  isRoomSideBarCollapsed: false,
  isChatPopUpOpen: false,
  isOnCall: false,
  isOnCallPopUp: false,
  setIsSideBarOpen: () => null,
  setIsSideBarCollapsed: () => null,
  setIsRoomSideBarCollapsed: () => null,
  setIsChatPopUpOpen: () => null,
  setIsOnCall: () => null,
  setIsOnCallPopUp: () => null,
});

export const SettingsProvider: React.FC<SettingProps> = ({ children }) => {
  const {
    isSideBarOpen,
    isSideBarCollapsed,
    isRoomSideBarCollapsed,
    isChatPopUpOpen,
    isOnCall,
    isOnCallPopUp,
    setIsSideBarOpen,
    setIsSideBarCollapsed,
    setIsRoomSideBarCollapsed,
    setIsChatPopUpOpen,
    setIsOnCall,
    setIsOnCallPopUp,
  } = useSettings();
  return (
    <SettingsContext.Provider
      value={{
        isSideBarOpen,
        isSideBarCollapsed,
        isRoomSideBarCollapsed,
        isChatPopUpOpen,
        isOnCall,
        isOnCallPopUp,
        setIsSideBarOpen,
        setIsSideBarCollapsed,
        setIsRoomSideBarCollapsed,
        setIsChatPopUpOpen,
        setIsOnCall,
        setIsOnCallPopUp,
      }}
    >
      {children}
    </SettingsContext.Provider>
  );
};

export interface SettingsContextType {
  isSideBarOpen: boolean;
  isSideBarCollapsed: boolean;
  isRoomSideBarCollapsed: boolean;
  isChatPopUpOpen: boolean;
  isOnCall: boolean;
  isOnCallPopUp: boolean;
  setIsSideBarOpen: (value: boolean) => void;
  setIsSideBarCollapsed: (value: boolean) => void;
  setIsRoomSideBarCollapsed: (value: boolean) => void;
  setIsChatPopUpOpen: (value: boolean) => void;
  setIsOnCall: (value: boolean) => void;
  setIsOnCallPopUp: (value: boolean) => void;
}

interface SettingProps {
  children?: ReactNode;
}