import React, { useEffect, useState } from 'react';
import { 
    View,
    ScrollView, 
    StyleSheet,
    Text,
    TouchableOpacity
} from 'react-native';
import { useSelector } from 'react-redux';
import Icon from '../../../../components/icons.js';
import Theme from '../../../../components/theme.style.js';
import DB from '../../../../components/storage';

const SearchResult = (props) => {
    const app_theme = useSelector(state => state.appThemeReducer.theme);
    const [savedLocations, setSavedLocations] = useState([]);

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

    const init = async () => {
        const locations = await DB.get("iqair");
        const parsedLocations = JSON.parse(locations);

        setSavedLocations(parsedLocations);
    }

    const renderResult = (value) => {
        const newLocation = [];
        
        const addLocation = async () => {
            if(savedLocations && savedLocations.length > 0) {
                newLocation.push(
                    ...savedLocations,
                    value
                )
            } else {
                newLocation.push(value)
            }

            await DB.set(
                "iqair", 
                JSON.stringify(newLocation), 
                () => props.onAddSuccess(), 
                (err) => console.log(err)
            );

        }

        const renderAddButton = () => {
            const checker = savedLocations ? savedLocations.find(location => location.station_uuid === value.station_uuid) : false 

            return (
                !checker && <TouchableOpacity onPress={addLocation} style={styles.addLocatioButton}>
                    <Text style={styles.addLocatioButtonText} numberOfLines={1} adjustsFontSizeToFit>ADD LOCATION</Text>
                </TouchableOpacity>
            )
        }

        return(
            <View style={styles.item(app_theme)}>
                <Icon.Ionicons name="location" size={20} color={Theme.colors.primary} />
                <View style={styles.itemInfo}>
                    <Text style={styles.itemName(app_theme)} numberOfLines={1} adjustsFontSizeToFit>{value.name}</Text>
                    <Text style={styles.itemsAddress(app_theme)}>{value.address}</Text>
                </View>
                <View style={styles.addLocationContainer}>
                    {renderAddButton()}
                </View>
            </View>
        )
    }

    return (
        <ScrollView contentContainerStyle={styles.scrollView}>
            {props.result && props.result.map(renderResult)}
        </ScrollView>
    )
}

export default SearchResult

const styles = StyleSheet.create({
    addLocatioButton: {
        backgroundColor: Theme.colors.primary,
        paddingVertical: 3,
        paddingHorizontal: 9,
        borderRadius: 3,
        alignItems: 'center'
    }, 
    addLocatioButtonText: {
        fontSize: 9,
        color: Theme.colors.white
    }, 
    addLocationContainer: {
        justifyContent: 'center',
    },
    item: (appTheme) => {
        return {
            marginHorizontal: 18,
            backgroundColor: appTheme?.theme.dark ? appTheme?.theme.colors.border : Theme.colors.white,
            paddingVertical: 10,
            paddingHorizontal: 17,
            shadowColor: '#000',
            marginBottom: 10,
            shadowOffset: { width: 0, height: .8},
            shadowOpacity: .3,
            shadowRadius: 3,
            elevation: 3,
            flexDirection: 'row'
        }
    },
    itemInfo: {
        marginLeft: 10,
        paddingRight: 10,
        flex: 1
    },
    itemName: (appTheme) => {
        return {
            fontSize: 14,
            color: appTheme?.theme.dark ? Theme.colors.white : Theme.colors.searchText
        }
    },
    itemsAddress: (appTheme) => {
        return {
            fontSize: 9,
            color: appTheme?.theme.dark ? Theme.colors.white : Theme.colors.searchText
        }
    },

    scrollView: {
        marginVertical: 20, 
        flex: 1,
    }
})