import React, { useContext, createContext } from 'react'

// Hook: useContext
// Context API: createContext()

const SomeContext = createContext()

const valueToSharedAcrossAllComponents = {
  someData: 'Some data to share'
};
const Provider = ({ children }) => {
  return (
    <SomeContext.Provider value={valueToSharedAcrossAllComponents}>
      {children}
    </SomeContext.Provider>
  )
}
const useSomeContext = () => {
  const someContext = useContext(SomeContext);
    
  if (someContext === undefined) {
    throw new Error(`useSomeContext debe ser usado dentro de Provider`)
  }
  
  return someContext;
}

// Usos del useContext y Context API

// Podemos usar useContext y Context API para enviar cierta información
// que queremos compartir en varios componentes que no se encuentran en 
// el mismo nivel o padre.

// Por ejemplo: si queremos compartir el tema de la aplicación a todos los
// componentes de la aplicación.
const theme = { color: 'peru', fontFamily: 'Roboto' }

const ThemeContext = createContext()

const ThemeProvider = ({ theme, children }) => {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
}

const useTheme = () => {
  const theme = useContext(ThemeContext);
    
  if (theme === undefined) {
    throw new Error(`useTheme debe ser usando dentro de ThemeProvider`)
  }
  
  return theme;
}