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


type Props = {

}


export default PranksCategoryView = (props: Props) =>
{
    function onPressCategoryBtn()
    {
        store.dispatch(PrankCategoryModalAC.toggleVisibility(true))
    }

    return (
        <View style={ styles.container }>

            <TouchableOpacity
                style = { styles.prankCategoryBtn }
                onPress = { onPressCategoryBtn }
            >
                <Text style={ styles.categoryTitleText }>Russkiy</Text>
                <Image
                    style = { styles.btnArrowImg }
                    source = { require('../../../assets/icons/common/back_arrow_icon.png') }
                    height = { 16 }
                />
            </TouchableOpacity>

        </View>
    )
}
PranksCategoryView.defaultProps = {

}



const styles = StyleSheet.create({
    container: {
        // height: 10,
        width: '100%',
        paddingVertical: 10,
        paddingHorizontal: 16,
    },
    prankCategoryBtn: {
        paddingVertical: 10,
        paddingHorizontal: 16,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderWidth: 3.5,
        borderColor: c().text_E5E5E6,
        borderRadius: 10,
    },
    categoryTitleText: {
        fontSize: 20,
        color: c().text_E5E5E6
    },
    btnArrowImg: {

        transform: [{ rotate: '-90deg' }],
    },
})
