import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  AsyncStorage,
  SafeAreaView,
  ScrollView,
  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" 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}>
        {/* <TouchableOpacity onPress={this.setData.bind(this)}> */}
        {/* 버튼 누르면 리스트 갱신됩니다 */}
        {/* <Image source={require("../../assets/refresh.png")} /> */}
        {/* <Text style={styles.textStyle}>Refresh Button</Text> */}
        {/* </TouchableOpacity> */}
        {/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */}
        <SafeAreaView>
          <ScrollView>
            <Card>
              {/* <View>
            {this.state.list.map((item, i) => (
              <View style={styles.lowContainer}>
                <View style={styles.halfContainer}>
                  <Text style={styles.textStyle} key={i}>
                    {item}
                  </Text>
                </View>
                <View style={styles.halfContainer}>
                  <Text style={styles.textStyle} key={i}>
                    {item}
                  </Text>
                </View>
              </View>
            ))}
          </View> */}
              {/* {this.state.imgurls.map((val, index) => <Well data={val} desc={this.state.li[index]} key={index}/> */}
              {this.state.results.map(item => (
                <View style={styles.lowContainer}>
                  <View>
                    <CardItem>
                      {
                        <Image
                          style={styles.poster}
                          source={{
                            uri: `https://image.tmdb.org/t/p/original/${item.poster_path}`
                          }}
                        />
                      }
                    </CardItem>
                    <CardItem>
                      <View>
                        <Text style={styles.textStyle}>{item.title}</Text>
                      </View>
                    </CardItem>
                  </View>
                </View>
              ))}
            </Card>
          </ScrollView>
        </SafeAreaView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "black",
    flex: 1
    // alignItems: "center",
    // justifyContent: "center"
  },
  lowContainer: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "black",
    // alignContent: "space-around",
    justifyContent: "center",
    alignItems: "center"
    // marginLeft: 10,
    // marginTop: 10,
    // marginBottom: 20
  },
  halfContainer: {
    flex: 1,
    backgroundColor: "yellow",
    justifyContent: "center",
    alignItems: "center"
  },
  poster: {
    // resizeMode: "cover",
    flex: 10,
    width: "40%",
    height: 120,
    paddingHorizontal: 58,
    alignItems: "stretch",
    borderRadius: 7
  },
  textStyle: {
    fontSize: 25,
    color: "white"
  }
});