import {config} from '@configs/gluestack-ui.config'; // default dark theme

type ThemeType = typeof config;
type ThemeColorsType = typeof config.tokens.colors;

export type {ThemeType, ThemeColorsType};
export default config;

export enum ThemeMode {
  Dark = 1,
  Light = 2,
}

/*import {Platform} from 'react-native';
import {extendTheme, Theme, useColorMode} from 'native-base';
import {ThemeMode} from './appVar';

import {useSelector} from 'react-redux';
import {RootState} from '@redux/store';
import {useEffect} from 'react';

export const theme = (_theme: ThemeMode) => {
  return extendTheme({
    config: {
      // Changing initialColorMode to 'dark'
      initialColorMode: 'dark',
    },
    fonts: {
      header: 'Outfit-Regular',
      medium: 'Outfit-Regular',
      regular: 'Outfit-Regular',
      semibold: 'Outfit-Regular',
    },
    colors: {
      black: [
        {
          // darkest
          100: '#414755',
          200: '#313640',
          300: '#293037',
          400: '#282e35',
          500: '#23272e',
          600: '#1a1d22',
          700: '#19191e',
          800: '#101013',
          900: '#060607',
        },
        {
          //dark
          100: '#414755',
          200: '#313640',
          300: '#293037',
          400: '#282e35',
          500: '#23272e',
          600: '#1a1d22',
          700: '#19191e',
          800: '#101013',
          900: '#060607',
        },
        {
          //light
          900: '#e9e8f0',
          800: '#e4e3ec',
          700: '#dfdde8',
          600: '#dad8e4',
          500: '#d7d5e1',
          400: '#d4d2de',
          300: '#d2d0db',
          200: '#cfcdd8',
          100: '#cdcbd5',
        },
      ][_theme],
      blackBG: [
        {
          // darkest
          100: '#000',
          200: '#000',
          300: '#000',
          400: '#000',
          500: '#000',
          600: '#000',
          700: '#000',
          800: '#000',
          900: '#000',
        },
        {
          //dark
          100: '#414755',
          200: '#313640',
          300: '#293037',
          400: '#282e35',
          500: '#23272e',
          600: '#1a1d22',
          700: '#19191e',
          800: '#101013',
          900: '#060607',
        },
        {
          //light
          900: '#e9e8f0',
          800: '#e4e3ec',
          700: '#dfdde8',
          600: '#dad8e4',
          500: '#d7d5e1',
          400: '#d4d2de',
          300: '#d2d0db',
          200: '#cfcdd8',
          100: '#cdcbd5',
        },
      ][_theme],
      white: [
        {
          // darkest
          100: '#ccc',
          200: '#ccc',
          300: '#ccc',
          400: '#ccc',
          500: '#ccc',
          600: '#ccc',
          700: '#ccc',
          800: '#ccc',
          900: '#ccc',
        },
        {
          //dark

          900: '#e9e8f0',
          800: '#e4e3ec',
          700: '#dfdde8',
          600: '#dad8e4',
          500: '#d7d5e1',
          400: '#d4d2de',
          300: '#d2d0db',
          200: '#cfcdd8',
          100: '#cdcbd5',
        },
        {
          //light
          100: '#414755',
          200: '#313640',
          300: '#293037',
          400: '#282e35',
          500: '#23272e',
          600: '#1a1d22',
          700: '#19191e',
          800: '#101013',
          900: '#060607',
        },
      ][_theme],

      primary: {
        50: '#fff4f1',
        100: '#ffd6c9',
        200: '#ffb9a1',
        300: '#ff9b79',
        400: '#ff7d4f',
        500: '#f96e40',
        600: '#f26030',
        700: '#e95321',
        800: '#d54b1d',
        900: '#ba4721',
      },
    },
    components: {
      Divider: {
        baseStyle: ({colorMode}) => {
          return {
            backgroundColor: colorMode === 'dark' ? 'black.100' : 'black.200',
          };
        },
      },
      Text: {
        defaultProps: {
          size: 'md',
          fontFamily: 'Outfit-Regular',
          colorScheme: 'black',
        },
        sizes: {
          xl: {
            fontSize: '64px',
          },
          lg: {
            fontSize: '32px',
          },
          md: {
            fontSize: '16px',
          },
          sm: {
            fontSize: '12px',
          },
        },
        Button: {
          // Can simply pass default props to change default behaviour of components.
          baseStyle: {
            rounded: 'md',
          },
          defaultProps: {
            colorScheme: 'primary',
          },
        },
      },
    },
  });
};

export function getBackgroundColor(tm: ThemeMode): string {
  switch (tm) {
    case ThemeMode.Light:
      return '#fff';
    case ThemeMode.Darkest:
      return '#000';
    default:
      return '#1b1c22';
  }
}

export function isThemeDark(tm: ThemeMode): boolean {
  return tm <= 1;
}

export function ThemeSwitcher() {
  const myTheme = useSelector(
    (state: RootState) => state.appVariables.preferences.theme,
  );
  const {setColorMode} = useColorMode();

  useEffect(() => {
    if (myTheme === ThemeMode.Darkest || myTheme === ThemeMode.Dark)
      setColorMode('dark');
    else setColorMode('light');

    if (Platform.OS === 'web') {
      document.body.setAttribute(
        'style',
        'background: ' + getBackgroundColor(myTheme) + ';',
      );
    }

    console.log('refreshed');
  }, [myTheme]);

  return null;
}
*/
