import React from 'react'
import { View, ViewStyle, Image, TouchableOpacity, StyleSheet, } from 'react-native'
import c from '../../color/colors'
import t from '../../translator/translator'

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


type Props = {
    containerViewStyle: ViewStyle,
    isSoundPlaying: Boolean,
    onPressPlayPause: () => void,
    onPressReset: () => void,
}


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

                </View>


                <View style={ styles.centerSideView }>

                    <TouchableOpacity
                        style = { styles.playPauseBtn }
                        onPress = { props.onPressPlayPause }
                    >
                        {
                            props.isSoundPlaying ?
                            <MyText style={ styles.playPauseBtnText }>Pause</MyText>
                            :
                            <MyText style={ styles.playPauseBtnText }>Play</MyText>
                        }
                    </TouchableOpacity>
                    
                </View>


                <View style={ styles.rightSideView }>

                    <TouchableOpacity
                        style = { styles.resetBtn }
                        onPress = { props.onPressReset }
                    >
                        <MyText style={ styles.resetBtnText }>Reset</MyText>
                    </TouchableOpacity>
    
                </View>
            </View>
        </View>
    )
}
BottomView.defaultProps = {
    isRecording: false,
}



const styles = StyleSheet.create({
    container: {

    },
    btnsView: {
        marginTop: 20,
        paddingHorizontal: 20,
        flexDirection: 'row',
        alignItems: 'center',
    },
    leftSideView: {
        flex: 1,
        alignItems: 'flex-start',
    },
    centerSideView: {
        flex: 1,
        alignItems: 'center',
    },
    rightSideView: {
        flex: 1,
        alignItems: 'flex-end',
    },

    playPauseBtn: {
        paddingVertical: 10,
        paddingHorizontal: 16,
        backgroundColor: c().main_black,
        borderRadius: 6,
    },
    playPauseBtnText: {
        fontWeight: 'bold',
        color: c().main_white,
    },

    resetBtn: {
        paddingVertical: 10,
        paddingHorizontal: 16,
        backgroundColor: c().main_black,
        borderRadius: 6,
    },
    resetBtnText: {
        fontWeight: 'bold',
        color: c().main_white,
    },
})
