/**
* Usage:
*
* export default function MyComponent() {
*   const customVariable = useCustom();
*   const changeCustomVarible = useCustomUpdate();
*   // Call change custom variable function to change value to reflect to all other places
* }
* <CustomProvider><MyComponent /></CustomProvider>
*/
import React, { useContext, useState } from 'react';

const CustomContext = React.createContext();
const CustomContextUpdate = React.createContext();

/**
* Get current custom variable hook
*/
export function useCustom() {
  return useContext(CustomContext);
}

/**
* Update custom variable hook
*/
export function useCustomUpdate() {
  return useContext(CustomContextUpdate);
}

export default function CustomProvider({ children }) {
  const [customVariable, setCustomVariable] = useState('');
  
  function changeCustomVariable(value) {
    setCustomVariable(value);
  }
  
  return (
    <CustomContext.Provider value={customVariable}>
      <CustomContextUpdate.Provider value={changeCustomVariable}>
        {children}
      </CustomContextUpdate.Provider>
    </CustomContext.Provider>
  );
}