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

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

import {theme} from '@caj/configs/colors';

import imgSrc from '@caj/img/maimg.png';

interface User {
  name: string;
  id: number;
}

const user: User = {
  name: 'Hayes',
  id: 0,
};

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

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

  const [curTheme, setTheme] = useState(1);
  var bg = '#222';

  if (curTheme !== 1) bg = curTheme === 0 ? '#000' : '#fff';

  console.log(colorMode);
  const toggleSwitch = () => {
    console.log('switch');
    toggleColorMode();
  };

  return (
    <SafeAreaView style={[styles.container, {backgroundColor: bg}]}>
      <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>
          <Text style={{}}>ma boyy :--)))</Text>
        </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 = curTheme + 1;
            if (theme > 2) theme = 0;
            setTheme(theme);

            setColorMode(theme === 0 || theme === 1 ? 'dark' : 'light');
          }}
          h={10}>
          Change theme
        </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 Bar = () => {
  const {colorMode, toggleColorMode} = useColorMode();

  return (
    <StatusBar
      barStyle={colorMode === 'dark' ? 'light-content' : 'dark-content'}
      backgroundColor="transparent"
      translucent={true}
    />
  );
};

const App = () => {
  useEffect(() => {
    // this code will run once
  }, [])

  return (
    <NavigationContainer>
      <NativeBaseProvider theme={theme}>
        <Bar />
        <TestContent />
      </NativeBaseProvider>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    height: '100%',
    flex: 1,
  },
});
/*
const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  image: {
    width: 500,
    height: 500,
    borderWidth: 1,
  },
});*/

export default App;
