import React, { Component } from 'react'
import { View, FlatList, Alert, SafeAreaView, StatusBar, StyleSheet, } from 'react-native'
import { StackNavigationProp, } from '@react-navigation/stack'
import { store } from '../../redux/store'
import { LangGlobalModalAC, } from '../../redux/actionCreators'
import RNFS from 'react-native-fs'
import Sound from 'react-native-sound'
import c from '../../color/colors'
import t from '../../translator/translator'

import BasePage from '../BasePage'
import TabPagePageViewer from '../../components/pageViewers/TabPagePageViewer'
import TabHeaderView from '../../components/headers/TabHeaderView'
import TitleView from './TitleView'
import PranksCategoryView from './PranksCategoryView'
import ItemView from './itemView/ItemView'

import DocumentPicker from 'react-native-document-picker'

type Props = {
    navigation: StackNavigationProp<''>,
}


export default class Tab_1_Page extends BasePage<Props>
{
    state: {
        selectedItemIndex: Number,
        runnedVoice: Number,
    }

    constructor(props)
    {
        super(props)
        this.onPressItem = this.onPressItem.bind(this)
        this.onPressPlayPauseItem = this.onPressPlayPauseItem.bind(this)

        this.state = {
            selectedItemIndex: null,
            runnedVoice: null,
        }
    }


    async componentDidMount()
    {
        Sound.setCategory('Playback')

        // this.props.navigation.navigate('VoicePrankCameraPage', { voice: fakeArray[0], })
        // this.props.navigation.navigate('NoticifationPrankCameraPage')
        // this.props.navigation.navigate('ShareVideoPage', { videoPath: null })
    }


    render()
    {
        return (
            <TabPagePageViewer>

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

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

                <View style={ styles.container }>

                    <FlatList
                        contentContainerStyle = { styles.scrollCnt }
                        showsVerticalScrollIndicator = { false }
                        ListHeaderComponent = {
                            <>
                                <TitleView/>
                                <PranksCategoryView/>
                            </>
                        }
                        data = { fakeArray }
                        keyExtractor = { (_, i) => i }
                        renderItem = { ({ item, index }) => (
                            <ItemView
                                itemName = { item.name }
                                isExpanded = { index == this.state.selectedItemIndex }
                                isSoundPlaying = { index == this.state.runnedVoice }
                                timeText = { item.timeText }
                                soundRequire = { item.url }
                                videoUrl = { item.videoUrl }
                                onPress = { () => this.onPressItem(index) }
                                onPressStartTheFun = { () => this.props.navigation.navigate('VoicePrankCameraPage', { voice: fakeArray[index], }) }
                                onPressPlayPause = { () => this.onPressPlayPauseItem(index) }
                            />
                        ) }
                    />

                </View>
            </TabPagePageViewer>
        )
    }


    // onPressItem(index: Number)
    // {
    //     if(this.state.selectedItemIndex == index)
    //         this.setState({ selectedItemIndex: null })
    //     else
    //         this.setState({ selectedItemIndex: index })
    // }

    async onPressItem(index: Number)
    {
        // Pick a single file
        try
        {
            const res = await DocumentPicker.pickSingle({
              type: [DocumentPicker.types.audio],
            })
            console.log(
              res.uri,
              res.type, // mime type
              res.name,
              res.size,
            )
        }
        catch(err)
        {
            console.log('----- Canceled', err)
            if (DocumentPicker.isCancel(err)) {
                console.log('----- Canceled', err)
              // User cancelled the picker, exit any dialogs or menus and move on
            } else {
              throw err
            }
        }
        // DocumentPicker.pickMultiple()
  
    }

    onPressPlayPauseItem(index: Number)
    {
        if(this.state.runnedVoice == index)
            this.setState({ runnedVoice: null })
        else
            this.setState({ runnedVoice: index })
    }

}



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


const fakeArray = [
    {
        name: 'Баланс счета $2 890 534',
        url: require('../../../assets/voicePranks/RU001.mp3'),
        videoUrl: 'https://www.youtube.com/watch?v=016R9lfrQhQ&t=164s',
    },
    {
        name: 'Результаты анализов на венерические заболевания',
        url: require('../../../assets/voicePranks/RU002.mp3'),
        videoUrl: 'https://youtu.be/9g7E4wGcvv4',
    },
    {
        name: 'Я забыла лифчик в твоей машине, проверь пожалуйста',
        url: require('../../../assets/voicePranks/RU003.mp3'),
        videoUrl: 'https://www.youtube.com/watch?v=ddF9RWxll1w',
    },
    {
        name: 'Тест на беременность',
        url: require('../../../assets/voicePranks/RU004.mp3'),
        videoUrl: 'https://www.youtube.com/watch?v=4d2VQ4KVNbA',
    },
    {
        name: 'Текущий баланс вашего счета 125 млн. рублей',
        url: require('../../../assets/voicePranks/RU005.mp3'),
        videoUrl: 'https://www.youtube.com/watch?v=ca_AgHphTHI&t=19s',
    },
]
