import {Image, StyleSheet, TouchableOpacity, View} from "react-native";
import {openImageZoomModal, setImages} from "../../features/imageZoomModal/loadingModalSlice";
import React from "react";
import {RFPercentage} from "react-native-responsive-fontsize";
import {useAppDispatch} from "../../redux/store";

type Props = {
    imageUrl?: string;
}
const ProductImageView = (props: Props) => {
    const {imageUrl} = props;
    const dispatch = useAppDispatch()
    return (
        <TouchableOpacity style={styles.imageWrapper} onPress={() => {
            if (!imageUrl) return;
            dispatch(setImages([imageUrl]));
            dispatch(openImageZoomModal());
        }}>
            <View style={{flex: 1}}>
                <Image style={styles.image} source={{uri: imageUrl}}/>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    imageWrapper: {
        flex: 0.5,
        backgroundColor: "white",
        padding: RFPercentage(2),
        borderRadius: RFPercentage(3)
    },
    image: {
        flex: 1,
        resizeMode: "contain"
    },
});
export default ProductImageView