import {FC} from "react";
import {Props} from "react-native-paper";
import {StyleSheet, View, Image, TouchableOpacity} from "react-native";
import {BottomSheetModalProvider} from "@gorhom/bottom-sheet";
import {useDispatch, useSelector} from "react-redux";
import {RootState} from "../../../redux/store";
import Modal from "react-native-modal";
import {background, blue} from "../../../css/colors";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import * as Progress from 'react-native-progress';
import ImageViewer from "react-native-image-zoom-viewer";
import {RFPercentage} from "react-native-responsive-fontsize";
import {closeImageZoomModal} from "../../../features/imageZoomModal/loadingModalSlice";

const ImageZoomModal: FC = () => {
    const isVisible = useSelector((state: RootState) => state.imageZoomModal.isVisible);
    const imageUrls = useSelector((state: RootState) => state.imageZoomModal.imageUrls);
    const dispatch = useDispatch();
    return (
        <Modal isVisible={isVisible}>
            <View style={styles.container}>
                <View style={styles.header}>
                    <TouchableOpacity onPress={() => {
                        dispatch(closeImageZoomModal())
                    }}>
                        <View style={styles.imageWrapper}>
                            <Image source={require('assets/icons/cancel.png')} style={styles.image}/>
                        </View>
                    </TouchableOpacity>

                </View>
                <ImageViewer
                    imageUrls={imageUrls.map(imageUrl => {
                        console.log(imageUrl)
                        return {
                            url: imageUrl
                        }
                    })}/>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        alignSelf: "center",
        backgroundColor: background,
        borderRadius: responsiveWidth(2),
        paddingBottom: responsiveHeight(5),
        paddingHorizontal: responsiveWidth(5),
        height: "95%",
        width: "95%"
    },
    header: {
        flexDirection: "row",
        justifyContent: "flex-end",
        padding: RFPercentage(2)
    },
    imageWrapper: {
        height: responsiveHeight(4),
        width: responsiveHeight(4),
    },
    image: {
        height: "100%",
        width: "100%",
        resizeMode: "center"
    }
})
export default ImageZoomModal;