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

const Theme = createContext('light');

export default Theme;

export function ThemeToggleButton({onChange}) {
  let theme = useContext(Theme);
  let [targetTheme, setTargetTheme] = useState(theme);
  function toggleTheme() {
    let newTheme = theme === 'light' ? 'dark' : 'light';
    // High pri, responsive update.
    setTargetTheme(newTheme);
    // Perform the actual theme change in a separate update.
    setTimeout(() => onChange(newTheme), 0);
  }
  if (targetTheme !== theme) {
    return 'Switching to ' + targetTheme + '...';
  }
  return (
    <a className="link" onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'Dark' : 'Light'} theme
    </a>
  );
}