import { useState } from 'react';
import { useAppColorScheme } from 'twrnc';
import { create } from 'zustand';
import { tw } from './tailwind';

export interface ThemeStoreState {
  primary: string;
  primaryContrastText: string;
  secondary: string;
  secondaryContrastText: string;
  background: string;
  backgroundDark: string;
  backgroundSemiDark: string;
  backgroundSemiLight: string;
  backgroundLight: string;
  text: string;
  font: string;
  fontSemiBold: string;
  bodyFont: string;
}

const useThemeStore = create<ThemeStoreState>(() => ({
  primary: '#80C342',
  primaryContrastText: '#F2F2F2',
  secondary: '#F2F2F2',
  secondaryContrastText: '#231F20',
  background: '#231F20',
  backgroundDark: '#211F20',
  backgroundSemiDark: '#332F30',
  backgroundSemiLight: 'rgba(65, 61, 61, 0.5)',
  backgroundLight: '#424040',
  text: '#F2F2F2',
  font: 'Montserrat-Regular',
  fontSemiBold: 'Montserrat-SemiBold',
  bodyFont: 'Montserrat-Regular',
}));

export function useTheme() {
  return useThemeStore();
}

export function useThemeMode() {
  const [_colorScheme, toggleColorScheme, _setColorScheme] = useAppColorScheme(tw);
  const [currentTheme, setCurrentTheme] = useState('dark');

  const toggleThemeMode = () => toggleColorScheme();

  return { currentTheme, setCurrentTheme, toggleThemeMode };
}