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


type Props = {
    tabs: { name: String }[],
    selectedIndex: Number,
    onPress: (index: Number) => void,
}


export default TabHeaderView = (props: Props) =>
{
    function tabHeader(name: String, index: Number)
    {
        return (
            <TouchableOpacity
                key = { index }
                style = { styles.tabHeaderBtn }
                onPress = { () => props.onPress && props.onPress(index) }
                hitSlop = { {
                    top: 10,
                    bottom: 10,
                } }
            >
                <Text style={ styles.tabHeaderBtnText }>{ name }</Text>
                <View style={ styles.dotView }/>
            </TouchableOpacity>
        )
    }

    function selectedTabHeader(name: String, index: Number)
    {
        return (
            <TouchableOpacity
                key = { index }
                style = { styles.selectedTabHeaderBtn }
                onPress = { () => props.onPress && props.onPress(index) }
                hitSlop = { {
                    top: 10,
                    bottom: 10,
                } }
            >
                <Text style={ styles.selectedTabHeaderBtnText }>{ name }</Text>
                <View style={ styles.selectedDotView }/>
            </TouchableOpacity>
        )
    }


    return (
        <View style={ styles.container }>
            {
                props.tabs.map((item, i) => (
                    props.selectedIndex == i ?
                    selectedTabHeader(item.name, i)
                    : tabHeader(item.name, i)
                ))
            }
        </View>
    )
}
TabHeaderView.defaultProps = {
    tabs: [],
    selectedIndex: 0,
}



const styles = StyleSheet.create({
    container: {
        marginTop: 15,
        height: 32,
        flexDirection: 'row',
    },
    tabHeaderBtn: {
        flex: 1,
        alignItems:'center',
        justifyContent: 'center',
    },
    tabHeaderBtnText: {
        fontWeight: 'bold',
        color: c().text_908F94,
    },
    dotView: {
        marginTop: 3,
        height: 4,
        aspectRatio: 1,
    },

    selectedTabHeaderBtn: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    selectedTabHeaderBtnText: {
        fontWeight: 'bold',
        color: c().main_yellow,
    },
    selectedDotView: {
        marginTop: 3,
        height: 4,
        aspectRatio: 1,
        backgroundColor: c().main_yellow,
        borderRadius: 10,
    },
})
