import React from "react"
import { SafeAreaView,Text, TouchableOpacity,PanResponder, Button,  FlatList, View, Dimensions, Alert } from "react-native"

import VideoComponent from "./video.js"

import {setReduxVideoContainerRef} from "../../actions/redux/videocontainer.js"
import SearchBar from "./searchbar.js";
import { Rating } from "react-native-ratings";
import VideoHUD from "./videohud.js";
import { getMost } from "../../actions/api/getMostHandler.js";
import { string } from "prop-types";

import {connect} from "react-redux"

/*

    <NavigationEvents
            onWillFocus={payload => {
              console.log('video focused')
              console.log('video state', this.state)
            }}
            onDidBlur={payload => {
              console.log('video blurred')
              console.log('video state', this.state)
              if (!this.state.paused)
                this.setState({ paused : true })
            }}
          />


*/

function mapStateToProps(state) {
  const reducer = state.cameraReducer

  return {
    cameraReducer : reducer
  }
}

class StreamContainer extends React.Component {


    _measureDimensions = (event ) => {
        if (this.state.init == 0) {
            return
        }

        this.setState({
            itemWidth: event.nativeEvent.layout.width,
            itemHeight: event.nativeEvent.layout.height, init: 0 } )

    }

  constructor(props) {
    super(props);

    this.flatListRef

    this.currIndex = 0

    this.state = {data: [],
    maxIndex: 0, itemHeight: 550, itemWidth: 400, init: 1, refInit: 1
  }
}




  async componentDidMount() {
    let response = await getMost("TODAY", "new", 0, 100)


    let res = JSON.parse(response.data)

    let urls = this.state.data


    for(let i = 0; i < res.length; i++) {
      let s = res[i].Member

      if(s.charAt(0) == "/")
          s = s.substring(1)
      console.log("here's a source! ", s)
      urls.push({source:s})
    }

    let max = urls.length - 1

    this.setState( { data: urls, maxIndex: max, itemHeight: 550, itemWidth: 400, init: 1, refInit: 1} )
    this.forceUpdate()
  }

    renderItem = (item ) => {
          return (  <View style={{position:"relative",flex:1, height:this.state.itemHeight, width:this.state.itemWidth}}>
              <VideoComponent  source={item.item.source}  index={item.index} upswipe={this.upswipe} downswipe={this.downswipe}/>
              </View>
          )
    }

      _onViewableItemsChanged = ({ viewableItems, changed }) => {
        console.log("Visible items are", viewableItems);
        console.log("Changed in this iteration", changed);
      }


    render() {
        return (<>
            <SafeAreaView onLayout={(event) => this._measureDimensions(event)} style={{zIndex: 3, position:"absolute", top:0, left: 0, right:0, bottom: 0}}>

          {this.state.data.length > 0 && <FlatList
                scrollEnabled={false}
                style={{flex: 1 }}
                data={ this.state.data }

                ref={(ref) => { this.flatListRef = ref}}

                onViewableItemsChanged={this._onViewableItemsChanged}
                renderItem={(item) =>  this.renderItem(item) }
                keyExtractor={item => item.item}
                extraData={this.state}

            />}
            </SafeAreaView>

                </>)
    }

     upswipe = (childClose) => {
       childClose()
       if(this.currIndex < this.state.maxIndex) {
         this.currIndex++
         console.log(this.currIndex , " is the new index", this.state.data[this.currIndex])
         this.flatListRef.scrollToIndex({animated: true, index: this.currIndex})
       }
    }

    downswipe = (childClose) => {
       if(this.currIndex > 0) {
         childClose()
         this.currIndex--

         console.log(this.currIndex , " is the new index", this.state.data[this.currIndex])
         this.flatListRef.scrollToIndex({animated: true, index: this.currIndex})
       }
    }

}


export default connect(mapStateToProps)(StreamContainer)