import {useSafeAreaInsets} from "react-native-safe-area-context";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import React, {useEffect} from "react";
import {Theme} from "../assets/Theme";
import {useDispatch, useSelector} from "react-redux";

// @ts-ignore
export default function JokeDetail({route}) {
    const insets = useSafeAreaInsets()
    const joke = route.params.joke
    // @ts-ignore
    const joke1 = useSelector(state => state.appReducer.joke);
    const dispatch = useDispatch();
    useEffect(() => {
        const loadJokes = async () => {
            // @ts-ignore
            await dispatch(getJokesListWithId(joke.id));
        };
        loadJokes();
    }, [dispatch]);
    const eye = require("../assets/eye_icon.png")
    const heart = require("../assets/favorite_icon.png")
    return(
        <View style={styles.itemContainer}>
            <View style={styles.item} >
                <Image style={styles.image} source={{uri: joke.image}}/>
                <Text style={styles.Text}>{joke.setup}</Text>
                <Text style={styles.type}>{joke.type }</Text>



                <View style={styles.Container}>
                    <TouchableOpacity style={styles.favContainer}>
                        <View>
                            <Image
                                source={heart}
                                style={styles.imageButton}
                            />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.Button} >
                        <View style={styles.Container}>
                            <Image
                                source={eye}
                                style={styles.imageButton}
                            />
                            <Text style={styles.TextButton} >LA CHUTE</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        </View>

    )
}
const styles = StyleSheet.create({
    itemContainer: {
        display:"flex",
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent : "center",
        backgroundColor: Theme.purpleColor,
        marginVertical: 0,
        height : '100%'
    },
    item : {

        display :"flex",
        flex : 1,
        alignItems: 'center',
        justifyContent : "center",
        backgroundColor : Theme.indigoColor,
        marginTop : 5,
        height :'90%',
        width : '99%',
        margin : 10,
        borderRadius : 20,
        borderStyle : "solid",
        borderBlockColor : Theme.whiteColor,


    },
    type : {
        backgroundColor : Theme.whiteColor,
        borderRadius : 15,
        paddingHorizontal:10,
        paddingVertical:5
    },
    image : {
        margin : 5,
        width: 200,
        height:100,
        top : 5,
        alignSelf : "center",
        backgroundColor: "white"
    },
    Button:{
        borderRadius : 5,
        backgroundColor : Theme.darksalmonColor,
        height:50,
        width : 160,
        flexDirection : "row"
    },
    imageButton : {
        margin : 10,
        width: 50,
        height:50,
        top : 5,
        alignSelf : "center",
        backgroundColor: "none",
        tintColor : Theme.whiteColor
    },
    imageFav : {
        width: 50,
        height:50,
        top : 5,
        alignSelf : "center",
        backgroundColor: "none",
        tintColor : Theme.darksalmonColor,

    },
    favContainer : {
        margin : 20,
        borderWidth : 3,
        borderRadius : 15,
        borderColor : Theme.whiteColor,
        borderStyle : "solid"
    },
    Text : {
        margin : 5,
        textAlign : "center",
        color : Theme.whiteColor,
    },
    TextButton : {
        margin: 10,
        textAlign : "center",
        fontWeight: "700",
        color : Theme.whiteColor,
    },
    Container :{
        display : "flex",
        flex : 1,
        flexDirection: "row",
        alignItems : "center"

    }
})