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

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

export const theme = extendTheme({
  config: {
    // Changing initialColorMode to 'dark'
    initialColorMode: 'dark',
  },
  fonts: {
    header: 'Outfit-Regular',
    medium: 'Outfit-Regular',
    regular: 'Outfit-Regular',
    semibold: 'Outfit-Regular',
  },
  colors: {
    black: {
      100: '#C4C4C4',
      200: '#7C7C7C',
      300: '#292929',
      800: '#181725',
    },

    primary: {
      50: '#fff4f1',
      100: '#ffd6c9',
      200: '#ffb9a1',
      300: '#ff9b79',
      400: '#ff7d50',
      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: 'red',
      },
      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: 'red',
        },
      },
    },
  },
});

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

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;
}
