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

import { TextInputWithLimitView, TextInputAreaWithLimitView, } from '../../../../components/textInputs'
import { TimerOptionsView, } from '../../../../components/options'


type Props = {
    containerViewStyle: ViewStyle,

    senderNameValue: String,
    onChangeTextSenderName: (text: String) => void,

    notificationTextValue: String,
    onChangeTextNotificationText: (text: String) => void,

    timeItemsArr: ItemMobM[],
    selectedTimeIndex: Number,
    onPressTimeItem: (item: ItemMobM, index: Number) => void,
}


export default NotificationView = (props: Props) =>
{
    return (
        <View style={ [styles.container, props.containerViewStyle] }>
            <TextInputWithLimitView
                value = { props.senderNameValue }
                onChangeText = { props.onChangeTextSenderName }
                maxLength = { 15 }
                placeholder = { t().SenderName() }
            />
            <TextInputAreaWithLimitView
                value = { props.notificationTextValue }
                onChangeText = { props.onChangeTextNotificationText }
                textViewStyle = {{ marginTop: 16, minHeight: 70, maxHeight: 100, }}
                maxLength = { 150 }
                placeholder = { t().NotificationText() }
            />
            <TimerOptionsView
                containerViewStyle = {{ marginTop: 16, }}
                items = { props.timeItemsArr }
                selectedIndex = { props.selectedTimeIndex }
                onPressItem = { props.onPressTimeItem }
            />
        </View>
    )
}
NotificationView.defaultProps = {
    timeItemsArr: [],
}



const styles = StyleSheet.create({
    container: {
        paddingBottom: 16,
        borderBottomWidth: 2,
        borderColor: c().main_dark,
    },
})
