import React, {useState, useEffect} from 'react';

import {StyleSheet, Appearance} from 'react-native';
import {Box, Input, Text, Button, VStack, Center, Avatar} from 'native-base';
import {NavigationContainer} from '@react-navigation/native';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';

import {useSelector, useDispatch} from 'react-redux';
import {RootState} from '@caj/redux/store';
import {appVarActions} from '@caj/configs/appVarReducer';

import imgSrc from '@caj/img/maimg.png';
import {placeholder} from '@caj/lang/default';
import {getBackgroundColor} from '@caj/configs/colors';
import {saveVarChanges} from '@caj/helper/appData';

function CounterNum() {
  const lang = useSelector((state: RootState) => state.appVariables.lang);
  const version = useSelector(
    (state: RootState) => state.appVariables.preferences.version,
  );

  return <Text>{placeholder(lang.curVersion, {version})}</Text>;
}

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

  const dispatch = useDispatch();

  //const {colorMode, toggleColorMode, setColorMode} = useColorMode();

  //var bg = useColorModeValue('dark', 'coolGray.800');

  //const [curTheme, setTheme] = useState(1);

  return (
    <SafeAreaView
      style={[styles.container, {backgroundColor: getBackgroundColor(theme)}]}>
      <VStack space={4} alignItems="center">
        <Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} />
        <Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} />
        <Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} />
        <Box>
          <CounterNum />
        </Box>
        <Avatar bg="green.500" size="xl" source={imgSrc}>
          EM
        </Avatar>
        <Box>
          <Input w="90%" shadow={10} placeholder="Enter your name" />
        </Box>
        <Button
          w="64"
          onPress={() => {
            let _theme = theme + 1;
            if (_theme > 2) _theme = 0;
            dispatch(appVarActions.setTheme(_theme));
            saveVarChanges();
          }}
          h={10}>
          Change theme
        </Button>

        <Button
          w="48"
          onPress={() => {
            //dispatch(appVarActions.setVersion(3));
          }}
          h={10}>
          version +1
        </Button>
        <Button
          w="48"
          onPress={() => {
            //dispatch(appVarActions.setVersion(2));
          }}
          h={10}>
          version -1
        </Button>

        <Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} />
        <Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} />
        <Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} />

        <Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} />
        <Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} />
        <Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} />

        <Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} />
        <Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} />
        <Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} />
      </VStack>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    flex: 1,
  },
});
