import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  AsyncStorage,
  SafeAreaView,
  ScrollView,
  RefreshControl,
  Alert,
  Image
} from "react-native";
import { Card, CardItem, Icon } from "native-base";
import axios from "axios";
import MovieRankingTab from "./MovieRankingTab";
import { symbol } from "prop-types";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";

export default class App extends Component {
  state = {
    list: [], //영화 제목 list
    date: "", //날짜
    names: [], // api로 받아오 영화 제목
    imgurls: [], //이미지
    name0: [], //제목
    results: [], // json 오브젝트
    title: ""
  };

  //네비게이션 바
  static navigationOptions = {
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-star-outline" style={{ color: tintColor }} />
    )
  };

  //Data 설정함수
  setData = async () => {
    try {
      //요거 바꿔봤다
      // this.state.list = await AsyncStorage.getItem("movieName"); //List에 받아온다
      // console.log(this.state.list); //잘 뜨는데??
      // const value = await AsyncStorage.getItem("@movieName:key");
      // if (value !== null) {
      // We have data!!
      // await AsyncStorage.getAllKeys().then(console.log);
      this.state.list = await AsyncStorage.getAllKeys();
      // this.setState({
      //   name0: this.state.list[0].name
      // });
      // console.log("확인용", this.state.list);
      // var cnt = this.state.list.length;
      // console.log(cnt);
      // var temp1 = [];
      // var temp2 = [];
      for (var i = 0; i < this.state.list.length; i++) {
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${this.state.list[i]}&language=ko-KR&page=1`
          )
          .then(response => {
            var joined = this.state.imgurls.concat(
              response.data.results[0].poster_path
            );
            // var joined = response.data.results[0].poster_path;
            // var name = response.data.results[0].title;
            // var name = this.state.list.concat(response.data.results[0].title);
            // temp1.push(joined);
            // temp2.push(name);
            // var temp = this.state.list.concat(response.data.results[0].title);
            var result = this.state.results.concat(response.data.results[0]);

            // var temp = [joined, name];
            // var tempObj = this.state.results.concat(temp);
            // this.setState({ imgurls: joined, names: name, results: tempObj });
            this.setState({
              imgurls: joined,
              results: result
              // results: [this.state.list, imgurls]
            });
            console.log("list", this.state.list);
            console.log("imgurls", this.state.imgurls);
            // console.log("results", this.state.imgurls);
            // var temp = [];
            // console.log(newobj);
            // console.log(joined);
            // console.log(response.data.results[0].title);
            // console.log(response.data.results[0].poster_path);
            // console.log(response.data.results);
          });
        // var newobj = [temp1, temp2];
        // this.setState({ results: newobj });
        // console.log(newobj);

        // var a = [1, 3, 4];
        // var b = [3, 4, 5];
        // var newobj = [a, b];
        // var newobj = [...this.state.imgurls, ...this.state.names];
        // console.log(newobj);
      }
    } catch (error) {
      alert(error);
    }
  };

  componentDidMount() {
    this.setData();
    // var cnt = this.state.list.length;
    // console.log(cnt);
    // this.getDB();
  }

  render() {
    return (
      <View style={styles.container}>
        {/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */}
        <SafeAreaView style={styles.container}>
          <ScrollView style={styles.container}>
            <View style={styles.container}>
              {/* <Card> */}
              {this.state.results.map(item => (
                <View style={styles.lowContainer}>
                  <View style={styles.leftContainer}>
                    <CardItem style={styles.container}>
                      {
                        <TouchableOpacity
                          onPress={() =>
                            this.props.navigation.navigate("Detail", {
                              title: item.title
                            })
                          }
                        >
                          <Image
                            style={styles.poster}
                            source={{
                              uri: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`
                            }}
                          />
                        </TouchableOpacity>
                      }
                    </CardItem>
                  </View>
                  <View style={styles.rightContainer}>
                    <CardItem style={styles.container}>
                      <View style={styles.container}>
                        <Text style={styles.textStyle}>{item.title}</Text>
                      </View>
                    </CardItem>
                  </View>
                </View>
              ))}
              {/* </Card> */}
            </View>
          </ScrollView>
        </SafeAreaView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "black",
    flex: 1
    // alignItems: "center",
    // justifyContent: "center"
  },
  lowContainer: {
    marginLeft: 15,
    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: "40%",
    height: 80,
    paddingHorizontal: 58,
    alignItems: "stretch",
    borderRadius: 7
  },
  textStyle: {
    fontSize: 16,
    color: "white"
  },
  overview: {
    fontSize: 14,
    color: "white"
  }
});