import React, { useEffect, useState } from 'react';
import { IconButton } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';
import GlobalState from '../contexts/GlobalState.js';
import { useSnapshot } from 'valtio';
import VideoPlayer from './VideoPlayer';

const MediaView = (props) => {
    const gState = useSnapshot(GlobalState);
    const currentMedia = gState.currentMedia;
    const [state, setState] = useState('');
    const currentStyles = state === "min" ? styles.min : styles.float;

    return (
        <>
            {currentMedia ?
            <>
                <View style={{
                   ...currentStyles
                }}>
                    <VideoPlayer 
                        videoUrl={currentMedia} 
                        postId={props.postId} 
                        videoStyle={{
                            top: -10
                        }}
                    />
                    
                </View>
                <IconButton style={{
                    backgroundColor: "#c44d56",
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    zIndex: 3,
                    elevation: 20,
                    position: 'absolute',
                    right: 70,
                    bottom: 260,
                    opacity: 0.9
                }} icon={"close"} color="#fff" onPress={()=>{
                    GlobalState.currentMedia = '';
                }}></IconButton>
                <IconButton style={{
                    backgroundColor: "#c44d56",
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    zIndex: 3,
                    elevation: 20,
                    position: 'absolute',
                    right: 20,
                    bottom: 260,
                    opacity: 0.9
                }} icon={"remove"} color="#fff" onPress={()=>{
                    setState(state=="min" ? "" : 'min')
                }}></IconButton>
                </>
                : <></>
            }
        </>
    )
}

export default MediaView;


const styles = StyleSheet.create({
    float: {
        height: 178,
        width: 320,
        position: "absolute",
        bottom: 80,
        right: 10,
        backgroundColor: "#fff",
        borderRadius: 30,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 20,
        zIndex: 1,
        overflow: "hidden",
        paddingTop: -10,
    },
    min: {
        height: 0,
        width: 0,
        position: "absolute",
        bottom: 80,
        right: 10,
        backgroundColor: "#fff",
        borderRadius: 30,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 20,
        zIndex: 1,
        overflow: "hidden",
        paddingTop: -10,
    }
});