// Import Stuff
/// React Native
import * as React from 'react'
import { Text } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { WebView } from 'react-native-webview'

/// 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()

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

  function TabScreen({route}) {
    return (
      <SafeAreaView style={Styles.Container}>
        <WebView
          onError={() => Alert.alert("Page failed to load", "The page you're trying to view has failed to load. Either caused by a connection error or the a server-side issue.", [{text: 'OK'}])}
          source={{ uri: 'https://design.penpot.app' }}
          javaScriptEnabled={true}
          javaScriptEnabledAndroid={true}
          scalesPageToFit={false} // Too big if set to true
          allowsBackForwardNavigationGestures
        />
      </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>
    </NavigationContainer>
  )
}