/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import React, {useEffect, useState} from 'react';
// import Swiper from 'react-native-swiper';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Image,
} from 'react-native';
import {WebView} from 'react-native-webview';
import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },

  tinyLogo: {
    width: '100%',
    // resizeMethod: 'resize',
    // resizeMode: 'cover',
    height: 877,
    // backgroundColor: 'red',
  },
});

const App: () => Node = () => {
  const [imgInfo, setImgInfo] = useState({});
  const [pageConfig, setPageConfig] = useState({});
  const [menuType, setMenuType] = useState('0');

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  function initPage() {
    fetch(
      'http://git.houzhisoft.com/Rieko/first-android-config/raw/branch/main/config.json',
      {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      },
    )
      .then(response => {
        return response.json();
      })
      .then(responseJson => {
        setPageConfig(responseJson);
        console.log(responseJson, 'responseJson');
        // return responseJson.movies;
      })
      .catch(error => {
        setPageConfig({});
        console.error(error);
      });
  }

  useEffect(() => {
    // const imgInfo_ = Image.resolveAssetSource(bg);
    // setImgInfo(imgInfo_);
    // console.log(imgInfo_);
    // initPage();
    return () => {};
  }, []);
  const isDarkMode = useColorScheme() === 'dark';

  function onMessage(event) {
    setMenuType(event.nativeEvent.data || 0);
    console.log(event.nativeEvent.data, 'event', typeof event.nativeEvent.data);
  }

  // if (!pageConfig?.showApp) {
  //   return null;
  // }

  console.log(pageConfig, 'pageConfig', menuType === '0');
  return (
    <>
      <StatusBar
        // hidden={true}
        // translucent
        backgroundColor={'transparent'}
        // barStyle="light-content"
        translucent
        // barStyle="dark-content"
        barStyle={menuType === '0' ? 'light-content' : 'dark-content'}
      />
      <WebView
        scrollEnabled={false}
        originWhitelist={['*']}
        automaticallyAdjustsScrollIndicatorInsets={false}
        showsVerticalScrollIndicator={false}
        onMessage={onMessage}
        source={{
          uri: 'https://parking.houzhisoft.com/index.html',
        }}
      />
    </>

    /* <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        {imgInfo.height && <Image style={styles.tinyLogo} source={bg} />}

        <View
          style={{
            alignItems: 'center',
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Text>{pageConfig['bottom-tips']}</Text>
        </View>
      </ScrollView> */
    // </View>
  );
};

export default App;