import React, { useEffect, useState } from 'react';
import { ScrollView, View, Text, Image, TouchableOpacity, BackHandler } from 'react-native';
import { FontAwesome, Ionicons } from '@expo/vector-icons';
import config from '../../components/data/config.json'
import { styles } from '@/components/style/style';
import { FAB } from 'react-native-elements';
import { useNavigation, NavigationProp, useFocusEffect } from '@react-navigation/native';
import { GestureHandlerRootView, TextInput } from 'react-native-gesture-handler';

const InputData = (props:any) => {

    const TextType = function(){
        return (<>
            <TextInput keyboardType="default" style={{
                height: 40
                , paddingHorizontal: 15
                , borderBottomColor: "#fff"
                , borderBottomWidth: 1
                , backgroundColor:'#eee'
                , borderRadius:10
            }} placeholder={"..."} />
        </>)
    }


    return (<>
    {props && props.type && props.type == 'text'?
            <TextType/>
        :
            <></>
    }
    </>)
}


const HorizontalScrollView = () => {
    const [typeInput, setTypeInput] = useState('text')
    const navigation = useNavigation<NavigationProp<RootStackParamList>>();
    
    useFocusEffect(
        React.useCallback(() => {

            const onBackPress = () => {
                navigation.navigate("detailcontact");
                return true; // Prevent default behavior (exit app)
            };

            BackHandler.addEventListener('hardwareBackPress', onBackPress);
            navigation.setOptions({ headerLeft: () => null }); // Remove back button

            return () => {
                BackHandler.removeEventListener('hardwareBackPress', onBackPress);
            };
        }, [navigation])
    );

    const backtoCustomerDetail = function(){
        navigation.navigate('detailcontact');
    }


    return (
        <GestureHandlerRootView>
            <View style={{height: '100%',backgroundColor:'#ddd',flexDirection:"column"}}>
                <View style={{flex:1, flexDirection:'column'}}>
                    <View style={{}}>
                        <View style={{flexDirection:'row', alignItems:'flex-end', height:70,backgroundColor:'white'}}>
                            <Text style={{padding:10,paddingHorizontal:16,fontWeight:400,fontSize: 18}}>Nama Perusahaan</Text>
                        </View>
                    </View>
                    <View style={{flex:1, padding:10}}>
                        <InputData type={typeInput} />
                    </View>
                </View>
                <View style={{flexDirection:'row', height: 70, padding:5, backgroundColor:'white'}}>
                    <View style={{flex:1}}>
                        <TouchableOpacity>
                            <View style={{padding:10, margin:4, borderRadius:10, backgroundColor: config.color.primary}}>
                                <Text style={{textAlign:"center", fontSize:16, margin:0,color:'white'}}>Simpan</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex:1}}>
                        <TouchableOpacity onPress={backtoCustomerDetail}>
                            <View style={{ padding: 10, margin: 4, borderRadius: 10, backgroundColor: '#ddd' }}>
                                <Text style={{ textAlign: "center", fontSize: 16, margin: 0 }}>Kembali</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </GestureHandlerRootView>
    );
};


export default HorizontalScrollView;