import React, { useEffect, useState } from 'react'
import { 
    View, 
    Text,
    StyleSheet,
    TouchableOpacity,
    ActivityIndicator,
    Image,
    Alert
} from 'react-native';
import { 
    returnStatus,
    returnIcon,
    returnStatusId
} from '../../../../utils/IQAIRhelper';
import { 
    useDispatch, 
    useSelector 
} from 'react-redux';
import { useNavigation } from '@react-navigation/native';
import { openModal } from '../../../../redux/actions/AlertActions';
import DB from '../../../../components/storage';
import API from '../../../../components/api/iqair';
import Theme from '../../../../components/theme.style.js';
import Elements from '../../../../components/elements.js';
import Icon from '../../../../components/icons.js';

const ListItem = (props) => {
    const dispatch = useDispatch();
    const navigation = useNavigation();

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

    const {value, data} = props;
    const {item, index} = value;

    const [IQAir, setIQAir] = useState(undefined);
    const [loading, setLoading] = useState(false);
    const [retry, setRetry] = useState(true);
    const [ID, setID] = useState(0);

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

    const init = () => {
        setRetry(false);
        setLoading(true);

        setTimeout(() => {
            const data = {
                lat: value.latitude,
                lon: value.longitude
            }
    
            API(data, (res) => {
                if(res.data.message) {
                    setRetry(true);
                    setLoading(false);
                    return 
                } 

                const aqius = res.data.current.pollution?.aqius;
                setID(returnStatusId(aqius || 0));
                setIQAir(res.data.current);
                setLoading(false);
            }, (err) =>{
                setRetry(true)
                setLoading(false);
            })
        }, 1000)
    } 

    const onDelete = () => {
        dispatch(openModal({
            open: true,
            title: "Warning",    
            body: "Are you sure you want to delete this station?",
            yesCB: deleteStation,
            theme: app_theme
        }))
    }

    const deleteStation = async () => {
        const stations = await DB.get('iqair');
        if(stations) {
            const newArray = [...JSON.parse(stations)];
            const parsedArray = newArray.filter(station => station.station_uuid !== item.station_uuid);
            await DB.set('iqair', JSON.stringify(parsedArray), () => {
                props.init();
                dispatch(openModal({
                    open: true,
                    title: "Success",    
                    body: "Saved station is deleted",
                    yesButtonOnly: true,
                    yesText: "Okay",
                    theme: app_theme
                }))
            }, () => {});
        }
    }

    const onPressDetails = () => {
        navigation.navigate("Details", {
            value: props.value,
            data: props.value,
            iqairData: IQAir,
            id: ID
        })
    }

    return (
        <Elements.shadowView>
            <TouchableOpacity disabled={loading && !false} onPress={onPressDetails} style={styles.renderItem(index, data, app_theme)}>
                <View style={styles.firstRow}>
                    <Icon.Ionicons name="location" size={25} color={Theme.colors.primary} />
                    <View style={styles.infoContainer}>
                        <Text style={[styles.nameText, styles.darkColor(app_theme)]}>{item.name}</Text>
                        <Text style={[styles.addressText, styles.darkColor(app_theme)]}>{item.address}</Text>
                    </View>
                    <TouchableOpacity onPress={onDelete}>
                        <Icon.MaterialIcons name="delete" size={22} color={Theme.colors.primary} />
                    </TouchableOpacity>
                </View>
                {retry && 
                    <View style={[styles.secondRow, {alignItems: 'center', justifyContent: 'center'}]}>
                        <TouchableOpacity onPress={init}>
                            <Text>Retry</Text>
                        </TouchableOpacity>
                    </View>
                }
                {!retry &&
                <View style={styles.secondRow}>
                    { loading ? 
                        <View style={styles.activityIndicator}>
                            <ActivityIndicator />
                        </View>
                        :
                        <>
                            <View style={styles.iconContainer}>
                                <Elements.shadowView style={styles.iconShadow}>
                                    <Image source={returnIcon(ID)} style={styles.icon}/>
                                </Elements.shadowView>
                            </View>
                            <View style={styles.airlevelContainer(ID)}>
                                <Text style={[styles.airlevelTitle, styles.darkColor(app_theme)]}>{IQAir?.pollution.aqius} *</Text>
                                <Text style={[styles.airlevelIndicator, styles.darkColor(app_theme)]}>US AQI</Text>
                            </View>
                            <View style={styles.statusContainer(ID)}>
                                <Text style={[styles.statusText, styles.darkColor(app_theme)]} numberOfLines={2} adjustsFontSizeToFit >{returnStatus(ID).title}</Text>
                            </View>
                        </>
                    }
                </View>
                }
                {!retry &&
                    <View style={styles.thirdRow}>
                        { loading ? 
                            <View style={styles.activityIndicator}>
                                <ActivityIndicator />
                            </View>
                            :
                            <>
                                <View style={styles.water}>
                                    <Image style={styles.waterIcon} source={require("../../../../assets/iqairwater.png")}/>
                                    <Text style={[styles.infoText, styles.darkColor(app_theme)]}>{IQAir?.weather.hu}%</Text>
                                </View>
                                <View style={styles.wind}>
                                    <Image style={styles.airIcon} source={require("../../../../assets/iqairwind.png")}/>
                                    <Text style={[styles.infoText, styles.darkColor(app_theme)]}>{(IQAir?.weather.ws * 3.6).toFixed(2)} km/h</Text>
                                </View>
                                <View style={styles.cloud}>
                                    <Image style={styles.cloudIcon} source={require("../../../../assets/iqaircloud.png")}/>
                                    <Text style={[styles.infoText, styles.darkColor(app_theme)]}>{IQAir?.weather.tp}°</Text>
                                </View>
                            </>
                        }
                    </View>
                }
            </TouchableOpacity>
        </Elements.shadowView>
        
    )
}

export default ListItem

const styles = StyleSheet.create({
    renderItem: (index, data, appTheme) => {
        return {
            backgroundColor: appTheme?.theme.dark ? appTheme?.theme.colors.border : Theme.colors.white,
            borderRadius: 5,
            marginHorizontal: 18,
            paddingHorizontal: 15,
            paddingVertical: 8,
            marginTop: index === 0 ? 10 : 0,
            marginBottom: index === (data.length - 1) ? 20 : 15,
            elevation: 5
        }
    },
    firstRow: {
        flexDirection: 'row',
        height: 50,
    },
    infoContainer: {
        flex: 1,
        marginLeft: 8
    },
    nameText: {
        color: Theme.colors.searchText,
        fontSize: 14
    },
    addressText: {
        color: Theme.colors.searchText,
        fontSize: 10,
        marginTop: 2
    },
    secondRow: {
        flexDirection: 'row',
        height: 70,
    },
    iconContainer: {
        flex: .25, 
        backgroundColor: Theme.colors.whitesmoke, 
        alignItems: 'center', 
        justifyContent: 'center',
        borderTopLeftRadius: 5,
        borderBottomLeftRadius: 5
    },
    iconShadow: {
        alignItems: 'center', 
        justifyContent: 'center',
    },
    icon: {
        height: '75%', 
        resizeMode: 'contain'
    },
    airlevelContainer: (id) => {
        return {
            flex: .33, 
            backgroundColor: 
            Theme.colors.iqair[id].opacity, 
            alignItems: 'center', 
            justifyContent: 'center'
        }
    },
    airlevelTitle: {
        color: Theme.colors.white, 
        fontSize: 25
    },
    airlevelIndicator: {
        color: Theme.colors.white, 
        fontSize: 11
    },
    statusContainer: (id) => {
        return {
            flex: .37, 
            borderRadius: 5, 
            backgroundColor: Theme.colors.iqair[id].main, 
            left: -10, 
            justifyContent: 'center', 
            alignItems: 'center'
        }
    },
    statusText: {
        color: Theme.colors.white, 
        fontSize: 12, 
        fontWeight: 'bold', 
        textAlign: 'center'
    },
    thirdRow: {
        flexDirection: 'row',
        height: 20,
        alignItems: 'center',
        marginTop: 14,
        marginBottom: 5
    },
    water: {
        flex: .25,
        borderRightWidth: 1,
        borderColor: Theme.colors.gray,
        flexDirection: 'row',
        alignItems: 'center'
    },
    waterIcon: {
        marginRight: 3,
        height: 15,
        width: 15,
        resizeMode: 'contain'
    },
    wind: {
        flex: .33,
        flexDirection: 'row',
        alignItems: 'center'
    },
    airIcon: {
        height: 20,
        width: 20,
        marginLeft: 10,
        resizeMode: 'contain'
    },
    cloud: {
        left: -10,
        flex: .37,
        borderColor: Theme.colors.gray,
        borderLeftWidth: 1,
        flexDirection: 'row',
        alignItems: 'center'
    },
    cloudIcon: {
        height: 20,
        width: 20,
        resizeMode: 'contain',
        marginHorizontal: 4,
        marginLeft: 15
    },
    activityIndicator: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    infoText: {
        fontSize: 10, 
        color: Theme.colors.searchText
    },
    darkColor: (appTheme) => {
        if(appTheme?.theme.dark) {
            return {
                color: Theme.colors.white
            }
        }
    }
})