import React, { useState, } from 'react'
import { View, ScrollView, StyleSheet, } from 'react-native'
import { ItemMobM, NotificationMobM, } from '../../../../models/mobileModels'
import { useDispatch, useSelector, } from 'react-redux'
import { Tab_2_PageAC, } from '../../../../redux/actionCreators'
import { Tab_2_PageStateM } from '../../../../models/stateModels'
import c from '../../../../color/colors'
import t from '../../../../translator/translator'

import NotificationView from './NotificationView'
import AddOneMoreBtnView from './AddOneMoreBtnView'
import { SimpleBtnView, } from '../../../../components/buttons'


type Props = {
    onPressStartTheFun: () => void,
}


export default TabBody_1_View = (props: Props) =>
{
    const dispatch = useDispatch()
    const state: Tab_2_PageStateM = useSelector((state) => state.Tab_2_PageState)
    let { notifications } = state

    function setStatePage(state: Tab_2_PageStateM)
    {
        dispatch(Tab_2_PageAC.setState(state))
    }

    // const newNotifTemp: NotificationMobM = { senderName: '', notificationText: '', selectedTimeIndex: 0, timeValue: 5 }

    // const [notifArr, setNotifArr]: [NotificationMobM[], (_:NotificationMobM[]) => void] = useState([ { ...newNotifTemp } ])

    function onPressAddOneMore()
    {
        setStatePage({ notifications: [...notifications, { notificationText: '', selectedTimeIndex: 0, timeValue: notifications[0].timeValue + 3, senderName: notifications[0].senderName }]})
    }

    function getNotifTimes(notifIndex: Number)
    {
        let i = notifIndex

        if(notifIndex == 0)
            return [
                { title: '5', value: 5, },
                { title: '10', value: 10, },
                { title: '15', value: 15, },
            ]
        else if(notifIndex > 0)
        {
            let startTime = notifications[i - 1].timeValue
            return [
                { title: `${startTime + 3}`, value: startTime + 3 },
                { title: `${startTime + 6}`, value: startTime + 6 },
                { title: `${startTime + 9}`, value: startTime + 9 },
            ]
        }
    }


    return (
        <View style={ styles.container }>
            <ScrollView
                contentContainerStyle = { styles.scrollCtn }
            >
                {
                    notifications.map((notif, i) => (
                        <NotificationView
                            key = { i }
                            containerViewStyle = {{ marginVertical: 16, }}

                            senderNameValue = { notif.senderName }
                            onChangeTextSenderName = { text => { notif.senderName = text; setStatePage({ notifications: [...notifications] }); } }

                            notificationTextValue = { notif.notificationText }
                            onChangeTextNotificationText = { text => { notif.notificationText = text; setStatePage({ notifications: [...notifications] }); } }

                            timeItemsArr = { getNotifTimes(i) }
                            selectedTimeIndex = { notif.selectedTimeIndex }
                            onPressTimeItem = { (item, i) => { notif.selectedTimeIndex = i; notif.timeValue = item.value; setStatePage({ notifications: [...notifications] }); } }
                        />
                    ))
                }
                <AddOneMoreBtnView
                    onPress = { onPressAddOneMore }
                />
                <SimpleBtnView
                    containerViewStyle = { { marginTop: 16, } }
                    title = { t().startTheFunBtn() }
                    onPress = { props.onPressStartTheFun }
                />
            </ScrollView>
        </View>
    )
}
TabBody_1_View.defaultProps = {

}



const styles = StyleSheet.create({
    container: {

    },
    scrollCtn: {
        paddingHorizontal: 16,
        paddingBottom: 100,
    },
})
