import {Platform} from 'react-native';
import {extendTheme, Theme, 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 = (_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
          100: '#efefef',
          200: '#dfdfdf',
          300: '#cececf',
          400: '#bebebf',
          500: '#aeaeb0',
          600: '#9e9ea0',
          700: '#8e8e90',
          800: '#7d7d80',
          900: '#6d6d70',
        },
      ][_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: '#fbfafc',
          800: '#f8f8fb',
          700: '#f6f6f9',
          600: '#f4f4f8',
          500: '#f2f1f6',
          400: '#f0eff5',
          300: '#ededf3',
          200: '#ebeaf2',
          100: '#e9e8f0',
        },
      ][_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: '#d2d1d8',
          700: '#babac0',
          600: '#a3a2a8',
          500: '#8c8b90',
          400: '#757478',
          300: '#5d5d60',
          200: '#464648',
          100: '#2f2e30',
        },
        {
          //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',
        },
        spaces: {},
        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 /*, index?: number*/): string {
  let i = /*index ||*/ 0;
  i += 2;

  switch (tm) {
    case ThemeMode.Light:
      return ['#fff', '#e8e8e9', '#d1d2d3', '#bbbbbd', '#a4a4a7'][0];
    case ThemeMode.Darkest:
      return '#000';
    default:
      return ['#16161b', '##18191f', '#1b1c22', '#323338', '#49494e'][i];
  }
}

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

export const defaultHeaderStyle = (cur: ThemeMode, place?: 'registration') => {
  if (place === 'registration') {
    return {
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: theme(cur).colors.primary[500],
      },
    };
  }

  return {
    headerTintColor: theme(cur).colors.primary[400],
    headerStyle: {
      backgroundColor:
        cur === ThemeMode.Light
          ? '#eee'
          : cur === ThemeMode.Dark
          ? '#181d21'
          : '#000',
    },
  };
};

export function themeSelector() {
  const theme = useSelector(
    (state: RootState) => state.appVariables.preferences.theme,
  );

  return theme;
}

export const themeNB = theme;

export function darkThemeStyle(theme: ThemeMode, borderColor: string) {
  return theme === ThemeMode.Darkest ? {borderWidth: 1, borderColor} : {};
}
