import React, { useState } from 'react'
import { 
    View, 
    StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import CustomSafeArea from '../../../../components/safeArea.component'
import CustomHeader from '../../../../components/header.js'
import Search from './Search';
import SearchResult from './SearchResult';

const SearchScreen = (props) => {
    const navigation = useNavigation();
    const [result, setResult] = useState([]);
    const { onGoBack } = props.route.params;
    
    const successSearch = (result) => {
        setResult(result);
    }

    const onAddSuccess = () => {
        successSearch([]);
        onGoBack();
        navigation.goBack();
    }

    return (
        <CustomSafeArea>
            <CustomHeader  
                navigation={navigation}
                title="IQAIR"
                boldTitle={true}
                back={true}
                onBackPress={() => navigation.goBack()} 
            />

            <View style={styles.container}>
                <Search successSearch={successSearch} />

                <SearchResult onAddSuccess={onAddSuccess} result={result} />
            </View>
        </CustomSafeArea>
    )
}

export default SearchScreen

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 20
    }
})