// Import Stuff
/// React Native
import * as React from 'react'
import { useState } from "react"
import { Alert, AsyncStorage, Text, TextInput, UseState, View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { WebView } from 'react-native-webview'
import Modal from "react-native-modal"

/// React Native Navigation
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'

/// Expo Modules
import * as SystemUI from 'expo-system-ui'

/// Options
import ScreenOptions from './options/TabOptions'

/// Stylesheets
import Styles from './stylesheets/style'

// Others
SystemUI.setBackgroundColorAsync("black")
const Tab = createMaterialTopTabNavigator()

let InstanceURL = 'https://design.penpot.app/'

// App
export default function App() {
  const [isModalVisible, setModalVisible] = useState(false);

  const ToggleSettingModal = () => {
    setModalVisible(!isModalVisible);
  };

  const [tabs, setTabs] = React.useState([
      {
        name : "1",
        component : TabScreen,
      }
  ])
  const addNewTab = () => {
    setTabs(tabs => [
      ...tabs,
      {
        name : "" + (parseInt(tabs.pop().name.replace("", "")) + 1),
        component : TabScreen,
      }
    ])
  }
  const remove = (route) => {setTabs(tabs => tabs.filter(tab => tab.name !== route.name))}

  function Loading() {
    return (
      <View>
        <Text>Loading</Text>
      </View>
    )
  }

  function TabScreen({route}) {
    return (
      <SafeAreaView style={Styles.Container}>
        <WebView
          onError={(syntheticEvent) => {const { nativeEvent } = syntheticEvent}}
          renderError={() => Alert.alert("Something went wrong", "The page you are trying to load has either crashed or there is no connection. Please check your Instance setting to make sure the URL is correct.", [{text: 'OK'}])}
          renderLoading={() => <Loading />}
          startInLoadingState={true}
          source={{ uri: InstanceURL }}
          javaScriptEnabled={true}
          javaScriptEnabledAndroid={true}
          scalesPageToFit={false}
          bounces={false}
          pullToRefreshEnabled={false}
          contentMode={'desktop'}
          androidLayerType={'software'}
          allowsBackForwardNavigationGestures
          style={{backgroundColor: '#202020'}}
        />
      </SafeAreaView>
    )
  }

  return (
    <NavigationContainer>
      <Tab.Navigator
        optimizationsEnabled={true}
        backBehavior='none'
        keyboardDismissMode='none'
        screenOptions={{
          tabBarGap: 10,
          tabBarAndroidRipple: { borderless: false },
        }}
        {...{ screenOptions }}>
        {
          tabs.map(tab => <Tab.Screen
            key={tab.name}
            name={tab.name}
            component={tab.component}
          />)
        }
      </Tab.Navigator>
      {/* {route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>} */}
      <Text
        style={Styles.AddButton}
        onPress={addNewTab}
      >+</Text>
      <Text
        style={Styles.SettingButton}
        onPress={ToggleSettingModal}
      >Settings</Text>
      
      <Modal
      animationIn={'fadeIn'}
      animationOut={'fadeOut'}
      isVisible={isModalVisible}
      onBackButtonPress={ToggleSettingModal}
      onBackdropPress={ToggleSettingModal}
      >
        <View style={Styles.Settings}>
          <Text>Instance</Text>
          <TextInput
            style={Styles.InstanceForm}
            type="text"
            onChange={(e) => SetInstance(e.target.value)}
            placeholder="https://design.penpot.app/"
            aria-label="InstanceURL"
          />
          <View style={{flexDirection:"row", alignSelf: 'flex-end'}}>
            <Text style={Styles.InstanceCancel} onPress={ToggleSettingModal}>Cancel</Text>
            <TextInput style={Styles.InstanceSubmit} type="submit" value="Submit"></TextInput>
          </View>
        </View>
      </Modal>
    </NavigationContainer>
  )
}