import React, { useState, useEffect } from 'react';
import Box from '@material-ui/core/Box';

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    background: {
        width: "100%",
        height: "100%",
        overflow: "auto",
        position: "absolute",
        "background-color": "rgba(0,0,0,1)",
        'overflow': 'hidden',
    },
    image_container: {
        'width': '100%',
        'height': '100%',
        'overflow': 'hidden',
    },
    image: {
        'object-fit': 'contain',
        'width': '100%',
        'height': '100%',
        'overflow': 'hidden',
    },
}));

export function GalleryImageRender(props) {
    const { src } = props;
    const classes = useStyles();

    return (
        <img src={src}
            className={classes.image} />
    );
}

export function GalleryPhoto(props) {
    const { photo } = props;

    // First show the fast (thumbnail) image.
    const [src, setSrc] = useState(photo.state.thumbnailpath);

    // Start a fetch of the full image, then show that.
    useEffect(() => {
        console.log("Fetching...");
        fetch(photo.state.path)
            .then(() => {
                console.log("Fetch done. setting image.");
                setSrc(photo.state.path);
            })
    }, []);

    return (
        <GalleryImageRender src={src} />
    );
}

export function GalleryVideo(props) {
    const { video } = props;
    const classes = useStyles();

    return (
        <>
            <video controls className={classes.image}>
                <source src={video.state.path} type="video/mp4" />
                Your browser does not support HTML5 video.
            </video>
        </>
    );
}

export function GalleryItem(props) {
    const { item } = props;

    if (item.state.is_video) {
        return <GalleryVideo video={item} />;
    } else {
        return <GalleryPhoto photo={item} />;
    }
}

export function Gallery(props) {
    const { onClose, items, current_item } = props;
    const classes = useStyles();

    var maybe_photo = false;
    if (items && items.length > 0 && current_item < items.length) {
        maybe_photo = items[current_item];
    }

    return (
        <>
            <Box
                className={classes.background}
                onClick={onClose}>
                <Box className={classes.image_container}>
                    {
                        maybe_photo &&
                        <GalleryItem item={maybe_photo} />
                    }
                </Box>
            </Box>
        </>
    );
}