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: "",
    dummy: 1
  };


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

  //Data 설정함수
  setData = async () => {
    try {

      this.state.list = await AsyncStorage.getAllKeys();

      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 result = this.state.results.concat(response.data.results[0]);

            this.setState({
              imgurls: joined,
              results: result
            });
            console.log("list", this.state.list);
            console.log("imgurls", this.state.imgurls);
          });
      }
    } catch (error) {
      alert(error);
    }
  };

  componentDidMount() {
    this.setData();
  }

  render() {
    return (
      <View style={styles.container}>
        <SafeAreaView style={styles.container}>
          <ScrollView style={styles.container}>
            <View style={styles.container}>
              {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>
              ))}
            </View>
          </ScrollView>
        </SafeAreaView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "black",
    flex: 1
  },
  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"
  }
});