import React, { Component } from 'react'
import { View, ScrollView, StyleSheet, Keyboard, SafeAreaView, StatusBar, Platform, } from 'react-native'
import { StackNavigationProp, } from '@react-navigation/stack'
import { connect, } from 'react-redux'
import RecordScreen from 'react-native-record-screen'
import { store } from '../../redux/store'
import { LangGlobalModalAC, } from '../../redux/actionCreators'
import Tab_2_PageAC, { Type, } from '../../redux/actionCreators/Tab_2_PageAC'
import { Tab_2_PageStateM, } from '../../models/stateModels'
import { NotificationMobM, } from '../../models/mobileModels'
import NotificationPopup from 'react-native-push-notification-popup'
import NotificationSounds, { playSampleSound } from  'react-native-notification-sounds'
import c from '../../color/colors'
import t from '../../translator/translator'

import RNFS from 'react-native-fs'
import PushNotification from 'react-native-push-notification'

import BasePage from '../BasePage'
import TabPagePageViewer from '../../components/pageViewers/TabPagePageViewer'
import TabHeaderView from '../../components/headers/TabHeaderView'
import TitleView from './TitleView'
import TabView from './tabView/TabView'

type Props = {
    navigation: StackNavigationProp<''>,
    route: {
        params: {

        }
    },

    reduxState: Tab_2_PageStateM,
} & Type


class Tab_2_Page extends BasePage<Props>
{
    popupView: NotificationPopup = null

    state: {

    }

    constructor(props)
    {
        super(props)
        this.onPressStartTheFun = this.onPressStartTheFun.bind(this)

        this.props.setState({ notifications: [
            { senderName: '', notificationText: '', selectedTimeIndex: 0, timeValue: 5, },
        ] })

        this.state = {

        }
    }

    componentDidMount()
    {
        // this.props.navigation.navigate('ShareVideoPage')
    }


    render()
    {
        return (
            <>
            <TabPagePageViewer>

                <StatusBar barStyle={ 'light-content' } backgroundColor={ c().main_black }/>
                <SafeAreaView/>

                <TabHeaderView
                    onPressLang = { () => store.dispatch(LangGlobalModalAC.toggleVisibility(true)) }
                />

                <ScrollView
                    style = { styles.container }
                    keyboardShouldPersistTaps = 'always'
                    onScrollBeginDrag = { () => Keyboard.dismiss() }
                >
                    <TitleView/>
                
                    <TabView
                        onPressStartTheFun = { this.onPressStartTheFun }
                    />

                </ScrollView>
            </TabPagePageViewer>
            <NotificationPopup
                ref = { ref => this.popupView = ref }
            />
            </>
        )
    }


    async onPressStartTheFun()
    {
        this.props.navigation.navigate('NoticifationPrankCameraPage', {
            notifications: this.props.reduxState.notifications,
        })
        // this.sentNotification('Test', 'Test message', 0)
    }

    sentNotification(title: String = '', message: String = '', delaySeconds: Number = 0)
    {
        this.playNotificationSound()
        // let timeOut = setTimeout(() =>
        // {
        //     this.playNotificationSound()
        //     this.popupView.show({
        //         onPress: function() {console.log('Pressed')},
        //         appIconSource: require('../../../assets/icons/notificationIcons/message.png'),
        //         appTitle: 'Message',
        //         timeText: 'Now',
        //         title,
        //         body: message,
        //         slideOutTime: 5000,
        //     })
        //     clearTimeout(timeOut)
        // }, delaySeconds * 1000) 
    }

    playNotificationSound()
    {
        NotificationSounds.getNotifications('notification').then(soundsList =>
        {
            let notificationName = Platform.select({ ios: 'Notification Haptic', android: 'Spaceline' })
            let sound = soundsList.find(x => x.title.includes(notificationName))

            if(sound)
                playSampleSound(sound)
        })
    }

}


function mapStateToProps(state)
{
    return {
        reduxState: state['Tab_2_PageState'],
    }
}
export default connect(mapStateToProps, Tab_2_PageAC)(Tab_2_Page)


const styles = StyleSheet.create({
    container: {
        flex: 1,
        // backgroundColor: c().d_background + '80',
        backgroundColor: c().d_background,
    },
    scrollCnt: {
        paddingBottom: 80,
    },
})
