/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React, {
  Component
} from "react";

import {
  TouchableOpacity,
  View,
  StatusBar,
  ActivityIndicator,
} from "react-native";
import { Icon, Button } from "native-base";
import { Video } from 'expo-av';
import styles from "./style2";
// import { NavigationStackScreenProps } from "react-navigation";

const videoUrl = require('../../../../assets/star/sample.mp4');
// interface VideoPlayerProps extends NavigationStackScreenProps {
//   goForBreaking: (key: string, routeName: string, params: any) => void
//   goForNarcos: (key: string, routeName: string, params: any) => void
//   goForThings: (key: string, routeName: string, params: any) => void
//   goForGame: (key: string, routeName: string, params: any) => void
//   source: any
// }
interface VideoState {
  rate: number,
  volume: number,
  muted: boolean,
  resizeMode: string,
  duration: any,
  currentTime: any,
  paused: boolean,
  loader: boolean,
  buffer: boolean,
  showIcon: boolean,
  icon: string
}
export default class VideoPlayer extends React.Component<VideoState> {
  constructor(props: any) {
    super(props)
  }
  static navigationOptions = {
    headerShown: false,
  };
  state = {
    rate: 1,
    volume: 1,
    muted: false,
    resizeMode: "contain",
    duration: 0.0,
    currentTime: 0.0,
    paused: false,
    loader: true,
    buffer: false,
    showIcon: false,
    icon: "ios-pause"
  };



  onLoad = (data: any) => {
    console.log('On load fired!');
    this.setState({ duration: data.duration });
    this.setState({ loader: false });
  }

  video: any;



  touchablePress = () => {

    if (!this.state.showIcon) {
      this.setState({
        showIcon: true
      }, () => {
        setTimeout(() => {
          this.setState({
            showIcon: false
          });
        }, 2500);
      });
    }

  }

  toggle = () => {
    this.setState({
      paused: !this.state.paused,
    });
    if (this.state.icon === "ios-play") {
      this.setState({
        icon: "ios-pause"
      });
    }
    else {
      this.setState({
        icon: "ios-play"
      });
    }
  }


  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          hidden
        />
        <TouchableOpacity
          style={styles.fullScreen}
          onPress={this.touchablePress}
        >
          <Video
            ref={(ref: any) => { this.video = ref; }}
            source={videoUrl}
            style={styles.fullScreen}
            rate={this.state.rate}
            shouldPlay={this.state.paused}
            volume={this.state.volume}
            isMuted={this.state.muted}
            resizeMode={'contain'}
            onLoad={this.onLoad}

            isLooping={true}
            useNativeControls={true}
          />
        </TouchableOpacity>
        <View>
          {(this.state.loader) && (
            <ActivityIndicator
              style={{ height: 80 }}
              color="#C00"
              size="large"
            />
          )}

          {!this.state.loader && this.state.showIcon && (
            <View style={styles.videoCancel}>
              <Button transparent onPress={() => this.props.navigation.goBack()}>
                <Icon name="cross" type="Entypo" style={styles.IconCross} />
              </Button>
            </View>
          )}
        </View>
      </View>
    );
  }
}

