import * as React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { SafeAreaView } from 'react-native-safe-area-context';
import { WebView } from 'react-native-webview'
import { StatusBar } from 'expo-status-bar';

const Tab = createMaterialTopTabNavigator();


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={S.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}
          onMessage={(event) => {}}
          scalesPageToFit={false}
          allowsBackForwardNavigationGestures
        />
        <Button
          title="Add a new tab"
          style={S.AddButton}
          onPress={addNewTab}
        ></Button>
        {
          route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>
        }
      </SafeAreaView>
    );
  }

  const S = StyleSheet.create({
    container: {
      flex: 1,
      position: 'relative'
    },
    AddButton: {
      position: 'absolute',
      bottom: 0,
      right: 0, 
      left: 0,
      height: 100,
      borderWidth: 2,
      borderColor: 'blue',
      backgroundColor: 'white',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }
  })

  return (
    <NavigationContainer>
      <Tab.Navigator styles={S.Tab}>
        {
          tabs.map(tab => <Tab.Screen
            key={tab.name}
            name={tab.name}
            component={tab.component}
            options={{
              headerTitle: (props) => <LogoTitle {...props} />,
              headerRight: () => (
                <Button
                  onPress={() => alert('This is a button!')}
                  title="Info"
                  color="#fff"
                />
              ),
            }}
          />)
        }
      </Tab.Navigator>
    </NavigationContainer>
  );
}