import React from 'react'
import { View, ViewStyle, TouchableOpacity, Image, SafeAreaView, 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,
    onPressBack: () => void,
}


export default HeaderView = (props: Props) =>
{
    return (
        <View style={ styles.container }>
            <SafeAreaView/>
            
            <View style={ styles.headerContainer }>

                <View style={ styles.centerView }>
                    <MyText style = { styles.secondsText }>{ props.secondsText }</MyText>
                </View>

                <View style={ styles.leftSideView }>

                    <TouchableOpacity
                        hitSlop = { {
                            top: 20,
                            left: 20,
                            right: 20,
                            bottom: 20,
                        } }
                        onPress = { props.onPressBack }
                    >
                        <Image
                            source = { require('../../../assets/icons/common/left_arrow_icon.png') }
                        />
                    </TouchableOpacity>

                </View>

                <View style={ styles.rightSideView }>

                </View>

            </View>

        </View>
    )
}
HeaderView.defaultProps = {
    secondsText: '00:00',
}



const styles = StyleSheet.create({
    container: {

    },
    headerContainer: {
        height: 40,
        paddingHorizontal: 16,
        flexDirection: 'row',
    },
    leftSideView: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    rightSideView: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    centerView: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center',
    },
    secondsText: {
        paddingVertical: 5,
        paddingHorizontal: 8,
        fontSize: 12,
        fontWeight: 'bold',
        fontVariant: ['tabular-nums'],
        color: c().main_white,
        backgroundColor: c().main_red,
        borderRadius: 8,
        overflow: 'hidden',
    },
    langBtn: {
        marginLeft: 20,
    },
    langBtnText: {
        fontSize: 24,
    },
})
