import React, { useState, useEffect, useRef, } from 'react'
import { View, Text, Image, TouchableOpacity, Animated, StyleSheet, } from 'react-native'
import analytics from '@react-native-firebase/analytics'
import Sound from 'react-native-sound'
import c from '../../../color/colors'
import t from '../../../translator/translator'

import ExpandedItemPartView from './ExpandedItemPartView'


type Props = {
    isExpanded: Boolean,
    isSoundPlaying: Boolean,
    itemName: String,
    timeText: String,
    soundRequire: NodeRequire,
    videoUrl: String,
    onPress: () => void,
    onPressPlayPause: () => void,
    onPressStartTheFun: () => void,
}

const playIcon = require('../../../../assets/icons/common/play_btn_icon.png')
const pauseIcon = require('../../../../assets/icons/common/pause_btn_icon.png')

export default ItemView = (props: Props) =>
{
    const [sound]: [Sound] = useState(new Sound(props.soundRequire))
    // const [isSoundPlayed, setIsSoundPlayed]: [Boolean] = useState(false)

    const heightAnim = useRef(new Animated.Value(64)).current
    const expandedHeight = useRef(64)

    useEffect(() =>
    {
        if(props.isExpanded)
            openAnim()
        else
            closeAnim()
    }, [props.isExpanded])

    useEffect(() =>
    {
        if(props.isSoundPlaying)
            soundPlay()    
        else
            soundStop()   
    }, [props.isSoundPlaying])

    function openAnim()
    {
        Animated.timing(
            heightAnim,
            {
              toValue: expandedHeight.current,
              duration: 1000,
              useNativeDriver: false,
            }
        ).start()
    }

    function closeAnim()
    {
        Animated.timing(
            heightAnim,
            {
              toValue: 64,
              duration: 1000,
              useNativeDriver: false,
            }
        ).start()
    }

    function onLayout(event)
    {
        const { height } = event.nativeEvent.layout
        expandedHeight.current = height + 64
    }

    async function onPressItem()
    {
        analytics().logEvent('basket', {
            id: 3745092,
            item: 'mens grey t-shirt',
            description: ['round neck', 'long sleeved'],
            size: 'L',
        })

        props.onPress && props.onPress()
    }

    function soundPlay()
    {
        try
        {
            sound.play(isEnd => props.onPressPlayPause)
        }
        catch(error)
        {
            console.log('---- sound not played')
        }
    }

    function soundStop()
    {
        try
        {
            sound.stop()
            sound.setCurrentTime(0)
        }
        catch(error)
        {
            console.log('---- sound not paused')
        }
    }

    function onPressStartTheFun()
    {
        soundStop()
        props.onPressStartTheFun && props.onPressStartTheFun()
    }

    function getTimeStringBySeconds(seconds: Number)
    {
        if(seconds == -1)
            return ''

        let minute = parseInt(seconds / 60)
        let minuteString = minute < 10 ? `0${minute}` : `${minute}`

        let second = parseInt(seconds % 60)
        let secondString = second < 10 ? `0${second}` : `${second}`

        return `${minuteString}:${secondString}`
    }


    return (
        <Animated.View
            style = { [styles.container, { height: heightAnim, backgroundColor: props.isExpanded ? c().main_dark : c().main_black, }] }
        >
            <TouchableOpacity
                style = { styles.itemBtn }
                onPress = { onPressItem }
            >
                <TouchableOpacity
                    onPress = { props.onPressPlayPause }
                    hitSlop = { {
                        top: 15,
                        left: 15,
                        right: 15,
                        bottom: 15,
                    } }
                >
                    <Image
                        style = { styles.playImg }
                        source = { props.isSoundPlaying ? pauseIcon : playIcon }
                    />
                </TouchableOpacity>
                
                <View
                    style = { styles.centerView }
                >
                    <Text style={ styles.itemName }>{ props.itemName }</Text>
                </View>
                <Text style={ styles.timeText }>{ getTimeStringBySeconds(sound.getDuration()) }</Text>
            </TouchableOpacity>

            <ExpandedItemPartView
                videoUrl = { props.videoUrl }
                onLayout = { onLayout }
                onPressStartTheFun = { onPressStartTheFun }
            />
        </Animated.View>
    )
}
ItemView.defaultProps = {

}



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