import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  Button,
  Image,
  TouchableOpacity
} from "react-native";
import { Icon } from "native-base";
import { Ionicons, AntDesign } from "@expo/vector-icons";
import {
  NavigationActions,
  createStackNavigator,
  withNavigation,
  SafeAreaView,
  ScrollView
} from "react-navigation";
import axios from "axios";
import { AsyncStorage } from "react-native";

export default class Detail extends Component {
  static navigationOptions = {
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-reorder" style={{ color: tintColor }} />
    )
  };

  state = {
    title: "",
    overview: "",
    release_date: "",
    url: "",
    back: "",
    key: ""
  };

  getDB = async search => {
    axios
      .get(
        `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
      )
      .then(response => {
        this.setState({
          title: response.data.results[0].title,
          overview: response.data.results[0].overview + "\n\n\n",
          release_date: response.data.results[0].release_date,
          url: response.data.results[0].poster_path,
          back: response.data.results[0].backdrop_path
        });
      });
  };
  getNaverApi = async search => {
    fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
      headers: {
        "X-Naver-Client-Id": NAVER_CLIENT_ID,
        "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
      }
    })
      .then(response => response.json())
      .then(json => this.setState({ items: json.items }));
  };

  _AllKeys = async () => {
    try {
      this.state.key = await AsyncStorage.getAllKeys();
      console.log(this.state.key);
    } catch (error) {}
  };

  componentDidMount() {
    this._AllKeys();
  }

  _onPressButton() {
    this._AllKeys();
    for (var value of this.state.key) {
      if (value == this.state.title) {
        AsyncStorage.removeItem(this.state.title);
        console.log("1");
        return;
      }
    }
    AsyncStorage.setItem(this.state.title, this.state.title);
    console.log("2");
  }

  render() {
    const { navigation } = this.props;
    var temp = navigation.getParam("title", "");
    this.getDB(temp);
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView style={styles.container}>
          <View style={styles.container1}>
            <View style={styles.posterContainer}>
              <View style={styles.backgroundContainer}>
                <Image
                  source={{
                    uri: `https://image.tmdb.org/t/p/original${this.state.back}`
                  }}
                  style={styles.posterBack}
                />
              </View>
              <View style={styles.overlay}>
                <Image
                  source={{
                    uri: `https://image.tmdb.org/t/p/original${this.state.url}`
                  }}
                  style={styles.posterFront}
                />
                <View style={styles.posterTitle}>
                  <Text style={styles.Title}>{this.state.title}</Text>
                </View>
              </View>
            </View>
          </View>
          <View style={styles.container2}>
            <View>
              <Text style={styles.name}>{this.state.title}</Text>
            </View>
            <View style={styles.lowContainer}>
              <Text style={styles.overview}>{this.state.release_date}</Text>
              <View style={styles.buttonLayout}>
                <TouchableOpacity
                  // title="추가 "
                  onPress={() => this._onPressButton()}
                >
                  <AntDesign name="star" color="yellow" style={styles.button} />
                </TouchableOpacity>
              </View>
            </View>
            <Text style={styles.overview}>{this.state.overview}</Text>
            {/* <Text style={styles.overview}>{this.state.url}</Text> */}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

//export default withNavigation(Detail);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black"
  },
  container1: {
    flex: 1,
    backgroundColor: "black"
  },
  container2: {
    flex: 2,
    backgroundColor: "black"
  },
  backgroundContainer: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    justifyContent: "flex-start"
  },
  overlay: {
    flexDirection: "row"
    // opacity: 0.5,
    // backgroundColor: "#000000"
    // alignItems: "center",
    // justifyContent: "flex-end"
  },
  posterContainer: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "flex-end"
  },
  posterTitle: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "flex-end"
  },
  posterBack: {
    // resizeMode: "cover",
    // flex: 10,
    width: "100%",
    height: "100%"
    // marginLeft: 10,
    // paddingHorizontal: 50
    // alignItems: "stretch",
    // alignItems: "center"
    // borderRadius: 7
  },
  posterFront: {
    // resizeMode: "cover",
    // alignItems: "center",
    // justifyContent: "flex-end",
    // flex: 10,
    marginTop: 100,
    marginLeft: 10,
    marginBottom: 10,
    width: 120,
    height: 160
    // marginLeft: 10,
    // paddingHorizontal: 45,
    // alignItems: "stretch",
    // borderRadius: 7
  },

  buttonLayout: {
    marginLeft: "auto",
    marginRight: 20,
    justifyContent: "space-around",
    // marginBottom: 10,
    flexDirection: "row"
  },
  button: {
    fontSize: 30
    // width: 30,
    // height: 30
  },
  searchContainer: {
    backgroundColor: "black",
    marginLeft: 40,
    marginRight: 40
  },
  input: {
    borderRadius: 10,
    backgroundColor: "#FFF",
    paddingLeft: 10,
    paddingRight: 10,
    height: 50,
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomColor: "#bbb",
    borderBottomWidth: StyleSheet.hairlineWidth
  },
  inputText: {
    flex: 1
  },
  addBtn: {
    color: "#4169E1"
  },
  imagecontainer: {
    flex: 1
  },
  lowContainer: {
    backgroundColor: "black",
    flex: 1,
    flexDirection: "row"
    // justifyContent: "center",
    // alignItems: "center"
  },
  leftContainer: {
    flex: 1,
    backgroundColor: "black",
    justifyContent: "center",
    alignItems: "center"
  },
  rightContainer: {
    flex: 2,
    backgroundColor: "black"
  },
  rightUpContainer: {
    flex: 1,
    backgroundColor: "black",
    paddingTop: 35,
    justifyContent: "center",
    marginLeft: 20
  },
  rightDownContainer: {
    flex: 3,
    backgroundColor: "black",
    paddingBottom: 10
  },

  Title: {
    marginLeft: 25,
    marginTop: 10,
    marginBottom: 20,
    fontSize: 25,
    fontWeight: "bold",
    color: "white"
  },
  name: {
    marginLeft: 10,
    marginTop: 10,
    marginBottom: 5,
    fontSize: 16,
    color: "white"
  },
  overview: {
    marginLeft: 5,
    fontSize: 14,
    color: "white"
  }
});