import React, { useState, useEffect, useRef, } from 'react'
import { View, Text, Image, TouchableOpacity, Animated, StyleSheet, } from 'react-native'
import Video from 'react-native-video'
import Sound from 'react-native-sound'
import { MyVideoMobM, PrankTypeMobE, } from '../../../models/mobileModels'
import c from '../../../color/colors'
import t from '../../../translator/translator'


type Props = {
    index: Number,
    itemName: String,
    myVideoItem: MyVideoMobM,
    onPress: () => void,
}


export default ItemView = (props: Props) =>
{

    function getItemNameByItem(item: MyVideoMobM)
    {
        switch(item.prankType)
        {
            case PrankTypeMobE.VoicePrank:
                return t().Voice_prank_n(props.index + 1)

            case PrankTypeMobE.NotificationPrank:
                return t().Notification_prank_n(props.index + 1)

            default:
                return t().Prank_n(props.index + 1)
        }
    }

    function onPressItem()
    {
        props.onPress && props.onPress()
    }

    return (
        <View
            style = { styles.container}
        >
            <TouchableOpacity
                style = { styles.itemBtn }
                onPress = { onPressItem }
            >
                <View>
                    <Video
                        style = { styles.playImg }
                        source = { { uri: props.myVideoItem.path } }
                        // source = { { uri: '' } }
                        poster = { props.myVideoItem.path }
                        posterResizeMode = 'cover'
                        controls = { false }
                        muted = { true }
                        paused = { true }
                    />
                </View>
                
                <View
                    style = { styles.centerView }
                >
                    <Text style={ styles.itemName } numberOfLines={ 1 }>{ props.myVideoItem.name.slice(0, -4) }</Text>
                </View>
                <Text style={ styles.timeText }>{ props.timeText }</Text>
            </TouchableOpacity>

        </View>
    )
}
ItemView.defaultProps = {

}



const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 16,
        backgroundColor: c().main_black,
        overflow: 'hidden',
    },
    itemBtn: {
        height: 64,
        flexDirection: 'row',
        alignItems: 'center',
    },
    playImg: {
        height: 45,
        aspectRatio: 1,
        borderRadius: 3,
    },
    centerView: {
        flex: 1,
        paddingLeft: 16,
    },
    itemName: {
        fontSize: 14,
        fontWeight: 'bold',
        color: c().text_E5E5E6,
    },
    timeText: {
        fontSize: 10,
        color: c().text_gray,
    },
})
