import React, { Component } from "react";
import { View, Text, StyleSheet, Button, Image } from "react-native";
import { Icon } from "native-base";
import {
  NavigationActions,
  createStackNavigator,
  withNavigation
} 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-albums" style={{ color: tintColor }} />
    )
  };

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

  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,
          release_date: response.data.results[0].release_date,
          url: response.data.results[0].poster_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 }));
  };

  _retrieveData = async item => {
    try {
      const value = await AsyncStorage.getItem(item);
      if (value !== null) {
        // We have data!!
        console.log(value);
      }
    } catch (error) {
      // Error retrieving data
    }
  };

  _AllKeys = async () => {
    const key = await AsyncStorage.getAllKeys();
    console.log(key);
  };

  componentDidMount() {
    // this._retrieveData("겨울왕국 2");
    // this._AllKeys();
    // AsyncStorage.removeItem("1");
  }

  render() {
    const { navigation } = this.props;
    var temp = navigation.getParam("title", "");
    this.getDB(temp);
    return (
      <View style={style.container}>
        <Text>{this.state.title}</Text>
        <Text>{this.state.release_date}</Text>
        <Text>{this.state.overview}</Text>
        <Text>{this.state.url}</Text>
        <Image
          source={{
            uri: `https://image.tmdb.org/t/p/original${this.state.url}`
          }}
          style={styles.poster}
        />
        <Button
          title="추가 "
          onPress={() =>
            AsyncStorage.setItem(this.state.title, this.state.title)
          }
        />
      </View>
    );
  }
}
const style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

//export default withNavigation(Detail);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black"
  },
  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
  },
  poster: {
    resizeMode: "cover",
    flex: 10,
    width: "30%",
    height: 160,
    marginLeft: 10,
    paddingHorizontal: 50,
    alignItems: "stretch",
    borderRadius: 7
  },
  name: {
    fontSize: 16,
    color: "white"
  },
  overview: {
    fontSize: 14,
    color: "white"
  }
});