import React from "react";
import { View, Text } from "./Themed";
import {StyleSheet, Image} from "react-native";
import global from "../constants/global";
import Colors from "../constants/Colors";
import { populateView } from "./markerModalView";
import { getIncidentEmoji } from "../constants/emojis";
import { TouchableOpacity } from "react-native-gesture-handler";
import { getDist } from "./helpers";


type ClusterSheetViewProps = {
    keyId: any;
    maxIndex: any;
    markerCache: any;
    handlePress:any;
    index:any;
    sor:any;
    distance: string;
}

const ClusterView = React.memo((props: ClusterSheetViewProps) => {
    let marker = populateView(props.keyId, props.markerCache, props.sor);

    // Checks if data is from sherlock api or sor api
    if(props.keyId.charAt(0) != "S" && props.keyId.charAt(2) !="S"){
        let markerDate = new Date(parseInt(marker.date + "000"));
        let addy = marker.formatted_address.split(",");
        addy = addy[0] + ", " + addy[1] + "," + addy[2].substring(0, 3);

        return(
            <TouchableOpacity style={styles.container}
                onPress={()=>props.handlePress(props.index)}
            >
                {/* Emoji */}
                <View style={[styles.emojiContainer, {backgroundColor:Colors.map['class'+marker.class as keyof typeof Colors.map]}]}>
                    <Text adjustsFontSizeToFit numberOfLines={1} style={styles.emoji}>{getIncidentEmoji(props.keyId.charAt(0)=="C"||props.keyId.charAt(2)=="C"?marker.code:marker.incident, marker.source.toString())}</Text>
                </View>

                {/* Brief info */}
                <View style={styles.main}>
                    <Text style={[styles.title, {color: marker.class==4?Colors.dark.redPastel:marker.class==5?Colors.dark.redPastel:Colors.dark.cyan}]}>{marker.incident}</Text>
                    <Text style={styles.address}>📏: <Text style={{color: parseInt(props.distance)<2||props.distance.substring(props.distance.length-4)=="feet"?Colors.dark.redBright:Colors.dark.text}}>{props.distance}</Text> away from you.</Text>
                    <Text style={styles.address}>📍: {addy}</Text>
                    <Text style={styles.address}>🕓: {markerDate.toLocaleString("en-US", {month:"long", day:"numeric",  year:"numeric", hour:"numeric", minute:"numeric"})}</Text>
                </View>

            </TouchableOpacity>
        )
    }else{
        // Sor data
        let data = marker.attributes;
        // Link to grab 'mugshot'
        let imgSource = "https://sor.tbi.tn.gov/api/sorimage/"+data.Tid;
        const userloc = global.userLocation as any;
        let distance = getDist(userloc.coords, {latitude:marker.geometry.y, longitude:marker.geometry.x});


        return(
            <TouchableOpacity style={styles.container}
                onPress={()=>props.handlePress(props.index)}
            >
                {/* SO Image */}
                <View style={[styles.imgContainer]}>
                    <Image style={[styles.sorImage]} src={imgSource} />
                </View>

                {/* Details */}
                <View style={styles.main}>
                    <Text style={[styles.title, {color: Colors.dark.cyan}]}>{data.FirstName + " " + data.MiddleName + " " + data.LastName}</Text>
                    <Text style={styles.address}>Classification: <Text style={{fontWeight:'bold', color: data.Classification=="OFFENDER AGAINST CHILDREN"?Colors.dark.redText:'orange'}}>{data.Classification}</Text></Text>
                    <Text style={styles.address}>📏: <Text style={{color: parseInt(props.distance)<2||props.distance.substring(props.distance.length-4)=="feet"?Colors.dark.redBright:Colors.dark.text}}>{distance}</Text> away from you.</Text>
                    <Text style={styles.address}>🏠: {data.ResAddr1+" "+data.ResAddr2+", "+data.ResCity +", "+data.ResState}</Text>
                    <Text style={styles.address}>🕓: {data.OffenseDate}</Text>
                </View>

            </TouchableOpacity>
        )
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // height: global.height*0.15,
        backgroundColor: Colors.dark.backgroundModal,
        borderRadius: 10,
        padding:10,
        minHeight: global.height*0.3*0.3+20,
    },
    emojiContainer:{
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        height: global.height*0.3*0.3,
        width: global.height*0.3*0.3,
        borderWidth:5,
        borderColor:Colors.dark.backgroundProfile,
        borderRadius: 10,
        alignSelf:"flex-end",
        right:10,
        top:10,
    },
    imgContainer:{
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        height: global.height*0.3*0.4,
        width: global.height*0.3*0.4,
        borderWidth:5,
        borderColor:Colors.dark.backgroundProfile,
        borderRadius: 10,
        alignSelf:"flex-end",
        right:10,
        top:10,
    },
    emoji:{
        fontSize: 40,
    },
    title:{
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'left',
        alignSelf:'flex-start'
    },
    main:{
        backgroundColor: Colors.dark.backgroundModal,
        width:"70%",
    },
    address:{

    },
    sorImage:{
        resizeMode: 'cover',
        width: global.height*0.3*0.39-5,
        height: global.height*0.3*0.39-5,
        borderRadius: 10,
    },

})

export default ClusterView;