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,
    secondsText: String,
    isRecording: Boolean,
    onPressTakePhoto: () => void,
    onPressPauseResume: () => void,
}


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

            <View style={ styles.btnsView }>

                <View style={ styles.leftSideView }>

                </View>

                <View style={ styles.centerSideView }>
                    <View style={ styles.takePhotoBtnView }>
                        {
                            props.isRecording ?
                            <TouchableOpacity
                                style = { styles.takePhotoSquareBtn }
                                onPress = { props.onPressTakePhoto }
                                hitSlop = { {
                                    top: 10,
                                    left: 10,
                                    right: 10,
                                    bottom: 10,
                                } }
                            />
                            :
                            <TouchableOpacity
                                style = { styles.takePhotoBtn }
                                onPress = { props.onPressTakePhoto }
                                hitSlop = { {
                                    top: 10,
                                    left: 10,
                                    right: 10,
                                    bottom: 10,
                                } }
                            />
                        }
                        
                    </View>
                </View>

                <View style={ styles.rightSideView }>

                    <View style={ styles.pauseResumeBtnView }>
                        <TouchableOpacity
                            style = { styles.pauseResumeBtn }
                            onPress = { props.onPressPauseResume }
                            hitSlop = { {
                                top: 20,
                                left: 20,
                                right: 20,
                                bottom: 20,
                            } }
                        >
                            <Image
                                style = { styles.changeCameraImg }
                                source = { require('../../../assets/icons/common/camera_pause_icon.png') }
                            />
                        </TouchableOpacity>
                    </View>

                </View>

            </View>
        </View>
    )
}
BottomView.defaultProps = {
    isRecording: false,
}



const styles = StyleSheet.create({
    container: {
        paddingBottom: 50,
    },
    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',
    },

    takePhotoBtnView: {
        height: 70,
        aspectRatio: 1,
        borderWidth: 5,
        borderColor: c().main_white,
        borderRadius: 50,
    },
    takePhotoBtn: {
        margin: 2,
        flex: 1,
        backgroundColor: c().main_white,
        borderRadius: 50,
    },
    takePhotoSquareBtn: {
        margin: 15,
        flex: 1,
        backgroundColor: c().main_red,
        borderRadius: 5,
    },

    pauseResumeBtnView: {
        height: 52,
        alignItems: 'center',
        justifyContent: 'center',
        aspectRatio: 1,
        borderColor: c().main_white,
        borderWidth: 3,
        borderRadius: 50,
    },
    pauseResumeBtn: {

    },
})