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

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


type Props = {
    containerViewStyle: ViewStyle,

    onPressInst: () => void,
    onPressFb: () => void,
    onPressTikTok: () => void,
    onPressMore: () => void,
    isShowDownloadBtn: Boolean,
    onPressDownload: () => void,
}


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

            <View style={ styles.headerView }>
                <MyText style={ styles.headerText }>{ t().Share() }</MyText>
            </View>

            <View style={ styles.socialNetworksBtnsCnt }>

                <TouchableOpacity
                    style = { styles.socialNetworkBtn }
                    onPress = { props.onPressInst }
                >
                    <Image
                        source = { require('../../../assets/icons/socialNetworks/inst_btn_icon.png') }
                    />
                </TouchableOpacity>

                <TouchableOpacity
                    style = { styles.socialNetworkBtn }
                    onPress = { props.onPressFb }
                >
                    <Image
                        source = { require('../../../assets/icons/socialNetworks/fb_btn_icon.png') }
                    />
                </TouchableOpacity>

                {/* <TouchableOpacity
                    style = { styles.socialNetworkBtn }
                    onPress = { props.onPressTikTok }
                >
                    <Image
                        source = { require('../../../assets/icons/socialNetworks/tiktok_btn_icon.png') }
                    />
                </TouchableOpacity> */}

                <TouchableOpacity
                    style = { styles.socialNetworkBtn }
                    onPress = { props.onPressMore }
                >
                    <Image
                        source = { require('../../../assets/icons/socialNetworks/more_btn_icon.png') }
                    />
                </TouchableOpacity>

            </View>

            {
                props.isShowDownloadBtn
                ?
                <BtnWithImgsView
                    containerViewStyle = { { marginTop: 24, marginBottom: 16, } }
                    title = { t().SAVE_VIDEOBtn() }
                    rightImg = { require('../../../assets/icons/common/download_icon.png') }
                    onPress = { props.onPressDownload }
                />
                :
                <MyText/>
            }

        </View>
    )
}
ShareBtnsView.defaultProps = {

}



const styles = StyleSheet.create({
    container: {

    },
    headerView: {
        alignItems: 'center',
    },
    headerText: {
        fontWeight: 'bold',
        color: c().main_white,
    },

    socialNetworksBtnsCnt: {
        marginTop: 20,
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    socialNetworkBtn: {

    },
})
