import { useUpdateTheme } from "../pages/_app";
import { useContext } from 'react';
import { ThemeContext, DefaultTheme  } from "styled-components";
import { darkTheme, amoledTheme, lightTheme } from './themes';

const StyleSelector = () => {
  const updateTheme = useUpdateTheme();
  const currentTheme = useContext(ThemeContext);

  //console.log(currentTheme); // DEBUG

  let newTheme: DefaultTheme;
  switch(currentTheme.themeId) {
    case 1:
      newTheme = darkTheme;
      break;
    case 2:
      newTheme = amoledTheme;
      break;
    case 3:
      newTheme = lightTheme;
      break;
    default:
      newTheme = currentTheme;
  }

  return (
    <button onClick={() => updateTheme(newTheme)}>Switch Style</button>
  );
}

export function getTheme(themeId: number): DefaultTheme {
  let theme: DefaultTheme;

  switch(themeId) {
    case 1:
      theme = lightTheme;
      break;
    case 2:
      theme = darkTheme;
      break;
    case 3:
      theme = amoledTheme;
      break;
    default:
      theme = darkTheme
  }

  return theme;
}

export default StyleSelector;