unioil-loyalty-rn-app/app/screens/iqair/stations/search/Search.js

import React, { useEffect, useState } from 'react'
import { 
    StyleSheet,
    TextInput,
    View,
    FlatList,
    TouchableOpacity,
    Text,
    Platform
} from 'react-native'
import { useSelector } from 'react-redux';
import Elements from '../../../../components/elements.js';
import Theme from '../../../../components/theme.style.js';
import Icon from '../../../../components/icons.js';
import REQUEST from '../../../../components/api';
import DB from '../../../../components/storage';

const Search = (props) => {
    const app_theme = useSelector(state => state.appThemeReducer.theme);

    const [cities, setCities] = useState([]);
    const [cityDropDown, setCityDropDown] = useState([]);
    const [loading, setLoading] = useState(false);
    const [selectedCity, setSelectedCity] = useState({});
    const [searchValue, setSearchValue] = useState("");

    useEffect(() => {
        init();
    }, []);

    const init = async () => {
        let SESSION = await DB.session()
        REQUEST('station_search', 'post', {
          Authorization: SESSION.token
        }, {}, {}, (res) => {
            setCities(res.data)
        }, (error) => {
          console.log(error)
        })
    }

    const onChange = (value) => {
        let result = []

        if(value) {
            for(var x=0;x<cities.length;x++){
                let name = cities[x].name.toLowerCase()
                if(name.includes(value.toLowerCase()) && cities[x].count > 0) result.push(cities[x])
            }
        }

        setSearchValue(value);
        setCityDropDown(result);
    }

    const onPressSearch = () => {
        if(cityDropDown.length !== 0) {
            setSearchValue("");
            setCityDropDown([]);
        } else {
            search();
        }
    }

    const search = async (item) => {
        setLoading(true);
        let SESSION = await DB.session()
        REQUEST("gas_stations_city", "get", {
            Authorization: SESSION.token
        }, {
            noID: true,
            value: item ? item.city_uuid : selectedCity.city_uuid
        }, {}, (res) => {
            if(res.data.length > 0){
                setSearchValue("");
                setSelectedCity({});
                props.successSearch(res.data);
            }
            setLoading(false);
        }, (error) => {
            setLoading(false);
        })
    }

    const renderItem = ({item, index}) => {
        const onPress = () => {
            setSearchValue(item.name);
            setSelectedCity(item);
            setCityDropDown([]);
            search(item);
        }

        return (
            <TouchableOpacity onPress={onPress} style={styles.searchItemButton}>
                <Text style={styles.searchItemText(app_theme)}>{item.name}</Text>
            </TouchableOpacity>
        )
    }
        
    return (
        <View style={styles.container}>
            <Elements.loaderView
                title="Validating"
                message="Please wait..."
                visible={loading}
            />
            {
                props.onPress ? 
                    <TouchableOpacity onPress={props.onPress} style={[styles.input, {paddingVertical: 10}]}>
                        <Text style={styles.buttonText}>City, Location</Text>
                        <TouchableOpacity disabled onPress={onPressSearch}>
                            {
                                Platform.OS === 'android' ?
                                <Icon.MaterialIcons name={cityDropDown.length === 0 ? "search" : "close"} color={Theme.colors.searchGray} size={20} />
                                :
                                <Icon.Ionicons name={cityDropDown.length === 0 ? "search" : "close"} color={Theme.colors.searchGray} size={20} />
                            }
                            
                        </TouchableOpacity>

                        {
                            cityDropDown.length > 0 &&
                                <View style={styles.dropDown}>
                                    <FlatList
                                        data={cityDropDown}
                                        renderItem={renderItem}
                                    />
                                </View>
                        }

                    </TouchableOpacity>
                    :
                    <View style={[styles.input, Platform.OS === 'ios' && {paddingVertical: 10}]}>
                        <TextInput 
                            style={styles.textInput(app_theme)}
                            placeholder={"City, Location"}
                            placeholderTextColor={Theme.colors.searchGray}
                            value={searchValue}
                            onFocus={props.onFocus}
                            onBlur={props.onBlur}
                            onChangeText={onChange}
                        />
                        <TouchableOpacity onPress={onPressSearch}>
                            {
                                Platform.OS === 'android' ?
                                <Icon.MaterialIcons name={cityDropDown.length === 0 ? "search" : "close"} color={Theme.colors.searchGray} size={20} />
                                :
                                <Icon.Ionicons name={cityDropDown.length === 0 ? "search" : "close"} color={Theme.colors.searchGray} size={20} />
                            }
                        </TouchableOpacity>

                        {
                            cityDropDown.length > 0 &&
                                <View style={styles.dropDown(app_theme)}>
                                    <FlatList
                                        data={cityDropDown}
                                        renderItem={renderItem}
                                    />
                                </View>
                        }
                    </View>
            }
        </View>
    )
}

export default Search

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 18,
        zIndex: 10,
    },
    input: { 
        width: '100%',
        borderWidth: 1, 
        flexDirection: 'row', 
        alignItems: 'center',
        paddingHorizontal: 10,
        borderRadius: 10,
        borderColor: Theme.colors.searchGray,
    },
    textInput: (apptheme) => {
        return {
            flex: 1,
            fontSize: 15,
            color: apptheme.theme.dark ? Theme.colors.white  : Theme.colors.black
        }    
    },
    dropDown: (apptheme) => {
        return {
            position: 'absolute',
            height: 400,
            left: 0,
            right: 0,
            bottom: -405,
            backgroundColor: apptheme?.theme.dark ? apptheme?.theme.colors.border : Theme.colors.white,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: .8},
            shadowOpacity: .4,
            shadowRadius: 1,
            elevation: 3,
            paddingHorizontal: 5
        }
    },
    searchItemButton:  {
        paddingVertical: 20, 
        paddingHorizontal: 10, 
        borderBottomWidth: 1,
        borderColor: Theme.colors.searchGray
    },
    searchItemText: (appTheme) => {
        return {
            color: appTheme?.theme.dark ? appTheme?.theme.colors.text : Theme.colors.darkerGray
        }
    },
    buttonText: {
        flex: 1,
        fontSize: 15, 
        color: Theme.colors.searchGray
    }
})