import { SafeAreaView } from "react-native";
import React from "react";

import ImageView from "react-native-image-viewing";

export default function MediaCacheOverlay({
  photos,
  previewVisible,
  setPreviewVisible,
  imgIndex,
  setImgIndex,
}) {
  //const videoRef = React.useRef(null);

  return (
    <SafeAreaView>
      <ImageView
        onRequestClose={() => setPreviewVisible(false)}
        visible={previewVisible}
        images={photos}
        imageIndex={imgIndex}
        // onImageIndexChange={(...props) => {
        //  // console.log(props);
        // }}
      />
    </SafeAreaView>
  );

  // return (
  //   <Modal
  //     onDismiss={() => setPreviewVisible(false)}
  //     onRequestClose={() => setPreviewVisible(false)}
  //     visible={previewVisible}
  //     transparent={false}
  //   >
  //     <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
  //       <Gallery
  //         initialPage={imgIndex}

  //         images={photos}
  //         onPageScroll={({ position }) => setcurrentIndex(position)}
  //         onPageScrollStateChanged={(state) =>
  //           state === "idle" ? setDragging(false) : setDragging(true)
  //         }
  //       />
  //       <TouchableOpacity
  //         style={{ position: "absolute" }}
  //         onPress={() => setPreviewVisible(false)}
  //       >
  //         <Ionicons
  //           name="ios-close"
  //           size={64}
  //           color="dodgerblue"
  //           style={{ margin: 20 }}
  //         />
  //       </TouchableOpacity>
  //       {!dragging && photos[currentIndex] && photos[currentIndex].videoUrl && (
  //         <TouchableOpacity
  //           style={{
  //             position: "absolute",
  //             left: Dimensions.get("window").width / 2 - 32,
  //             top: Dimensions.get("window").height / 2 - 32,
  //             justifyContent: "center",
  //             alignItems: "center",
  //           }}
  //           onPress={async () => {
  //             await videoRef.current.loadAsync(
  //               { uri: photos[currentIndex].videoUrl },
  //               {},
  //               false
  //             );
  //             videoRef.current.presentFullscreenPlayer();
  //           }}
  //         >
  //           <Ionicons name="play" size={64} color="white" />
  //         </TouchableOpacity>
  //       )}
  //     </SafeAreaView>
  //     <Video ref={videoRef} useNativeControls />
  //   </Modal>
  // );
}