/**
 * 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 {
  Dimensions,
  ImageBackground,
  TouchableWithoutFeedback,
  Animated,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  View,
  RefreshControl,
} from 'react-native';
import {
  Button,
  Icon,
  Card,
  CardItem,
  ActionSheet
} from 'native-base';
import styles from './styles';
import screenDetails from "./data";
import { NavigationSwitchScreenProps } from 'react-navigation-stack';


const deviceHeight = Dimensions.get("window").height;
const SEASONS_BUTTONS = ["Download", "View Details", "Cancel"];
const SCREEN_BUTTONS = ["Add to your list", "View Series Details", "Cancel"];
const CANCEL_INDEX = 2;
const rateText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
const trailerSeasonText = "Watch trailer season 1";
const showGenre = "Crime, Drama";
const rating = "5.0/5";
const comment = "279";


const HEADER_MAX_HEIGHT = deviceHeight / 1.5;
const HEADER_MIN_HEIGHT = Platform.OS === 'ios' ? ((deviceHeight / 10) - 5) : (deviceHeight / 10);
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
const arr = screenDetails.detailsScreens;

interface DetailProp extends NavigationSwitchScreenProps {
  goForEpisodes: (key: string, routeName: string, params: any) => void
  goForVideoPlayer: (key: string, routeName: string) => void
  goToSearch: (key: string, routeName: string) => void
  source: any
}
export default class DetailScreen extends React.Component<DetailProp, any> {
  static navigationOptions = {
    headerShown: false,
  };
  constructor(props: DetailProp) {
    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 { image, name } = state.params;
      this.setState({ image, name })
    }
  }
  goForEpisodes = () => {
    this.props.navigation.navigate({ key: "Episodes", routeName: "Episodes", params: { image: 1, name: "Narcos" } });
  }
  goForVideoPlayer = () => {
    this.props.navigation.navigate({ key: "VideoPlayer", routeName: "VideoPlayer" });
  }
  goToSearch = () => {
    this.props.navigation.navigate({ key: "Search", routeName: "Search" });
  }


  showActionSheet(BUTTONS: any[] | string[] | { text: string; icon?: string | undefined; iconColor?: string | undefined; }[], head: string | undefined) {
    return (ActionSheet.show(
      {
        options: BUTTONS,
        cancelButtonIndex: CANCEL_INDEX,
        title: head
      },
      buttonIndex => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      }));
  }

  _renderScrollViewContent() {
    return (
      <View style={[innerStyles.scrollViewContent, styles.scroll, styles.parentSeasonCard]}>
        {screenDetails.movieDetails.map((e, i) => {
          return (
            <View key={i}>
              <TouchableWithoutFeedback onPress={this.goForEpisodes}>
                <Card style={styles.seasonCard}>
                  <CardItem cardBody>
                    <ImageBackground
                      source={e.img}
                      style={styles.cardImage}
                    >
                      <Text style={styles.cardImageText}>Season {e.season}</Text>
                    </ImageBackground>
                  </CardItem>
                  <View style={styles.cardFoot}>
                    <View style={styles.cardEpisode}>
                      <Text style={styles.episodesRemaining}>{e.episodes}{" "}Episodes</Text>
                    </View>
                    <View style={styles.seasonsParentView} />
                    <View style={styles.seasonsChildView}>
                      <Button transparent onPress={() => this.showActionSheet(SEASONS_BUTTONS, "Season Options")}>
                        <Icon name="md-more" style={styles.icon} />
                      </Button>
                    </View>
                  </View>

                </Card>
              </TouchableWithoutFeedback>
            </View>
          );
        })}


      </View>
    );
  }

  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 viewTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, HEADER_SCROLL_DISTANCE],
      extrapolate: "clamp"
    });
    const detailTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 200],
      extrapolate: "clamp"
    });

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

    const { image, 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={arr[image]}
          />
          <Animated.View
            style={[
              styles.buttonAlign,
              {
                transform: [
                  { translateY: viewTranslate },
                ],
                zIndex: 5
              }
            ]}

          >

            <Button rounded style={styles.button} onPress={this.goForVideoPlayer}>
              <Icon style={styles.play} name="md-play" />
            </Button>

          </Animated.View>
          <Animated.View
            style={[
              styles.trailer,
              {
                transform: [{ translateY: viewTranslate }],
              }
            ]}
          >
            <Text style={styles.trailerText}>{trailerSeasonText}</Text>
          </Animated.View>
          <Animated.View
            style={[
              styles.remaining,
              {
                transform: [{ translateY: detailTranslate }]
              }
            ]}
          >
            <View style={styles.ratings}>
              <View style={styles.rating}>
                <Icon name="ios-star" style={styles.background} />
                <Icon name="ios-star" style={styles.background} />
                <Icon name="ios-star" style={styles.background} />
                <Icon name="ios-star" style={styles.background} />
                <Icon name="ios-star" style={styles.background} />
              </View>
              <Text style={styles.rateText}>{"  "}{rating}</Text>
              <View style={styles.rate} />
              <View style={styles.comment}>
                <Icon name="md-chatbubbles" style={styles.background} />
                <Text style={styles.rateText}>{"   "}{comment}</Text>
              </View>
            </View>
            <View style={styles.show}>
              <View>
                <Text style={styles.showName}>
                  {name}
                </Text>
              </View>
              <View>
                <Text style={styles.showGenre}>{showGenre}</Text>
              </View>
            </View>
            <View style={styles.description}>
              <Text style={styles.rateText}>
                {rateText}
              </Text>
            </View>
          </Animated.View>
        </Animated.View>
        <Animated.View
          style={[
            styles.bar,
            {
              transform: [{ translateY: titleTranslate }]
            }
          ]}
        >
          <View style={styles.headerView}>
            <View style={styles.headerBeginView}>
              <Button
                transparent
                onPress={() => this.props.navigation.goBack()}
              >
                <Icon
                  name="arrow-back"
                  style={styles.headerIcon}
                />
              </Button>
              <Button transparent>
                <Animated.Text style={[styles.headerText]}>{this.props.navigation.getParam('name')}
                </Animated.Text>
              </Button>
            </View>
            <View
              style={styles.headerEndView}
            >

              <Button transparent onPress={this.goToSearch}>
                <Icon name="search" style={styles.headerIcon} />
              </Button>
              <Button transparent onPress={() => this.showActionSheet(SCREEN_BUTTONS, "Options")}>
                <Icon name="md-more" style={styles.headerIcon} />
              </Button>
            </View>
          </View>
        </Animated.View>
      </View>
    );
  }
}

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