import React from 'react'
import { View, Image, ViewStyle, StyleSheet, } from 'react-native'
import FileViewer from 'react-native-file-viewer'
import Video from 'react-native-video'
import c from '../../color/colors'
import t from '../../translator/translator'

import { MyText, } from '../../components/texts'
import { BlurBtnView, } from '../../components/buttons'


type Props = {
    containerViewStyle: ViewStyle,
    videoPath: String,
    onPressRemoveWaterMark: () => void,
}


export default VideoInfoView = (props: Props) =>
{
    return (
        <View style={ styles.container }>

            <View style={ styles.videoCardView }>
                {/* <Image
                    style = { styles.videoPreviewImg }
                    source = { { uri: props.imagePath } }
                /> */}

                <Video
                    source = { { uri: props.videoPath } }
                    style = { styles.videoPreviewImg }
                    poster = { props.videoPath }
                    posterResizeMode = 'cover'
                    controls = { false }
                    muted = { true }
                    resizeMode = 'cover'
                />

            </View>

            {/* <BlurBtnView
                containerViewStyle = { { marginTop: 25, } }
                title = { t().REMOVE_WATERMARKBtn() }
                onPress = { props.onPressRemoveWaterMark }
            /> */}

        </View>
    )
}
VideoInfoView.defaultProps = {

}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        zIndex: 10,
    },
    videoCardView: {
        marginTop: 16,
        width: '100%',
        aspectRatio: 2/3,
        borderRadius: 16,
        overflow: 'hidden',
    },
    videoPreviewImg: {
        flex: 1,
        backgroundColor: c().main_gray,
    },
})
