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

import { MyText, } from '../texts'


type Props = {
    containerViewStyle: ViewStyle,
    items: ItemMobM[],
    selectedIndex: Number,
    onPressItem: (item: ItemMobM, index: Number) => void,
}


export default TimerOptionsView = (props: Props) =>
{
    return (
        <View style={ [styles.container, props.containerViewStyle] }>
            <View style={ styles.titleView }>
                <Image
                    style = { styles.clockImg }
                    source = { require('../../../assets/icons/common/clock_icon.png') }
                />
                <MyText style={ styles.titleText }>{ t().TimerTitle() }</MyText>
            </View>

            <View style={ styles.bodyView }>
                {
                    props.items.map((item, i) => {
                        return (
                            <TouchableOpacity
                                key = { i }
                                style = { props.selectedIndex == i ? styles.selectedOptionBtn : styles.optionBtn }
                                onPress = { () => props.onPressItem && props.onPressItem(item, i) }
                            >
                                <MyText style={ props.selectedIndex == i ? styles.selectedOptionBtnText : styles.optionBtnText }>{ `${item.title} ${t().shortSecond()}` }</MyText>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        </View>
    )
}
TimerOptionsView.defaultProps = {
    items: [],
}



const styles = StyleSheet.create({
    container: {

    },
    titleView: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    clockImg: {
        tintColor: c().main_yellow,
    },
    titleText: {
        marginLeft: 10,
        fontWeight: 'bold',
        color: c().main_yellow,
    },
    bodyView: {
        marginTop: 16,
        flexDirection: 'row',
    },
    optionBtn: {
        marginRight: 16,
        paddingVertical: 6,
        paddingHorizontal: 12,
        backgroundColor: c().main_yellow + '2B',
        borderRadius: 12,
    },
    optionBtnText: {
        fontWeight: 'bold',
        color: c().main_yellow,
    },

    selectedOptionBtn: {
        marginRight: 16,
        paddingVertical: 6,
        paddingHorizontal: 12,
        backgroundColor: c().main_yellow,
        borderRadius: 12,
    },
    selectedOptionBtnText: {
        fontWeight: 'bold',
        color: c().main_black,
    },
})
