/**
 * 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 {
  Animated,
  Platform,
  StatusBar,
  Text,
  View,
  Dimensions,
  StyleSheet,
  RefreshControl,
  TouchableOpacity,
  FlatList,
} from 'react-native';

import { ActionSheet, Button, Icon, List, ListItem } from 'native-base';
import styles1 from './styles';
import episodeData from './data';
import styles from './style1';
import { NavigationStackScreenProps } from 'react-navigation';

const deviceHeight = Dimensions.get('window').height;
const HEADER_MAX_HEIGHT = deviceHeight / 2.5;
const HEADER_MIN_HEIGHT =
  Platform.OS === 'ios' ? deviceHeight / 10 - 5 : deviceHeight / 10;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
const EPISODE_BUTTONS = ['Download', 'View Details', 'Cancel'];
const SCREEN_BUTTONS = ['Download All', 'View Series Details', 'Cancel'];
const CANCEL_INDEX = 2;
const epTime = '49:56';
const seasonNo = 'S01E';
const selectLang = 'vost-english';
interface EpisodesProp extends NavigationStackScreenProps {
  goForVideoPlayer: (key: string, routeName: string) => void;
  goToSearch: (key: string, routeName: string) => void;
  source: any;
}

export default class EpisodesScreen extends React.Component<EpisodesProp, any> {
  static navigationOptions = {
    headerShown: false,
  };
  constructor(props: any) {
    super(props);

    this.state = {
      scrollY: new Animated.Value(
        Platform.OS === 'ios' ? -HEADER_MAX_HEIGHT : 0
      ),
      refreshing: false,
    };
  }
  componentDidMount() {
    const { state } = this.props.navigation;
    if (state && state.params) {
      const { name } = state.params;
      this.setState({
        name,
      });
    }
  }

  _renderScrollViewContent() {
    return (
      <View style={innerStyles.scrollViewContent}>
        <FlatList
          data={episodeData.eps}
          keyExtractor={(ep: { name: any }) => ep.name}
          renderItem={(ep: { item: { name: string; no: any } }) => (
            <ListItem
              first
              button={true}
              style={styles1.listItem}
              onPress={this.goForVideoPlayer}
            >
              <View style={styles1.episodeView}>
                <View style={styles1.episodeWatched} />
                <View style={styles1.episodeDetailView}>
                  <View style={styles1.episodeNameView}>
                    <Text style={styles1.episodeTitle}>
                      {'    ' + ep.item.name}
                    </Text>
                    <Text>
                      {'  '}
                      {seasonNo}
                      {ep.item.no}
                    </Text>
                  </View>
                  <View style={styles1.episodeNameView}>
                    <Text>{'    '}</Text>
                    <Icon name="ios-time" style={styles1.episodeIcon} />
                    <Text>
                      {'  '}
                      {epTime}
                      {'          '}
                    </Text>
                    <Icon name="ios-list-box" style={styles1.episodeIcon} />
                    <Text>
                      {'  '}
                      {selectLang}
                    </Text>
                  </View>
                </View>

                <View style={styles1.episodeMore}>
                  <TouchableOpacity
                    onPress={() =>
                      this.showActionSheet(EPISODE_BUTTONS, 'Episode Options')
                    }
                  >
                    <Icon name="md-more" />
                  </TouchableOpacity>
                </View>
              </View>
            </ListItem>
          )}
        />
      </View>
    );
  }

  showActionSheet(BUTTONS: any, head: string) {
    return ActionSheet.show(
      {
        options: BUTTONS,
        cancelButtonIndex: CANCEL_INDEX,
        title: head,
      },
      (buttonIndex) => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      }
    );
  }
  goForVideoPlayer = () => {
    this.props.navigation.navigate({
      key: 'VideoPlayer',
      routeName: 'VideoPlayer',
    });
  };
  goToSearch = () => {
    // this.props.navigation.navigate({ key: 'Search', routeName: 'Search' });
  };

  render() {
    const scrollY = Animated.add(
      this.state.scrollY,
      Platform.OS === 'ios' ? HEADER_MAX_HEIGHT : 0
    );
    const headerTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, -HEADER_SCROLL_DISTANCE],
      extrapolate: 'clamp',
    });

    const imageOpacity = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [1, 1, 0],
      extrapolate: 'clamp',
    });
    const imageTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 100],
      extrapolate: 'clamp',
    });
    const titleTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 0, -8],
      extrapolate: 'clamp',
    });
    const textOpacity = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 1],
    });

    const { name } = this.state;
    return (
      <View style={styles.fill}>
        <StatusBar
          translucent
          barStyle="light-content"
          backgroundColor="#C14748"
        />
        <Animated.ScrollView
          style={styles.fill}
          scrollEventThrottle={1}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: true }
          )}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={() => {
                this.setState({ refreshing: true });
                setTimeout(() => this.setState({ refreshing: false }), 1000);
              }}
              progressViewOffset={HEADER_MAX_HEIGHT}
            />
          }
          contentInset={{
            top: HEADER_MAX_HEIGHT,
          }}
          contentOffset={{
            y: -HEADER_MAX_HEIGHT,
          }}
        >
          {this._renderScrollViewContent()}
        </Animated.ScrollView>
        <Animated.View
          pointerEvents="none"
          style={[
            innerStyles.header,
            { transform: [{ translateY: headerTranslate }] },
          ]}
        >
          <Animated.Image
            style={[
              styles.backgroundImage,
              {
                opacity: imageOpacity,
                transform: [{ translateY: imageTranslate }],
              },
            ]}
            source={require('../../../../assets/star/narcos.jpg')}
          />
        </Animated.View>
        <Animated.View
          style={[
            styles.bar,
            {
              transform: [{ translateY: titleTranslate }],
            },
          ]}
        >
          <View style={styles1.headerView}>
            <View style={styles1.headerBeginView}>
              <Button
                transparent
                onPress={() => this.props.navigation.goBack()}
              >
                <Icon name="arrow-back" style={styles1.headerIcon} />
              </Button>
              <Button transparent>
                <Animated.Text style={[styles1.headerText]}>
                  {name}
                </Animated.Text>
              </Button>
            </View>
            <View style={styles1.headerEndView}>
              <Button transparent onPress={this.goToSearch}>
                <Icon name="search" style={styles1.headerIcon} />
              </Button>
              <Button
                transparent
                onPress={() => this.showActionSheet(SCREEN_BUTTONS, 'Options')}
              >
                <Icon name="md-more" style={styles1.headerIcon} />
              </Button>
            </View>
          </View>
        </Animated.View>
      </View>
    );
  }
}

const innerStyles = StyleSheet.create({
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: '#f53d3d',
    overflow: 'hidden',
    height: HEADER_MAX_HEIGHT,
  },
  backgroundImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: HEADER_MAX_HEIGHT,
    resizeMode: 'cover',
  },
  scrollViewContent: {
    paddingTop: Platform.OS !== 'ios' ? HEADER_MAX_HEIGHT : 0,
  },
});
