import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  SafeAreaView,
  ScrollView,
  Alert,
  TouchableOpacity,
  TouchableHighlight,
  TouchableWithoutFeedback
} from "react-native";
import { Icon } from "native-base";
import { AsyncStorage } from "react-native";
import axios from "axios";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";

export default class MovieRankingTab extends Component {
  state = {
    isLoading: true,
    info: [],
    date: "",
    name0: [],
    name1: [],
    name2: [],
    name3: [],
    name4: [],
    name5: [],
    name6: [],
    name7: [],
    name8: [],
    name9: [],
    imgur0: [],
    imgurl: [],
    imgur2: [],
    imgur3: [],
    imgur4: [],
    imgur5: [],
    imgur6: [],
    imgur7: [],
    imgur8: [],
    imgur9: []
  };
  static navigationOptions = {
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-trophy" style={{ color: tintColor }} />
    )
  };

  getMovieList = async date => {
    axios
      .get(
        `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
      )
      .then(
        response => {
          this.setState({
            name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
            name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
            name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
            name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
            name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
            name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
            name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
            name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
            name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
            name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,
            info: response.data.boxOfficeResult.dailyBoxOfficeList
          });

          name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl0: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl1: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl2: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl3: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl4: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl5: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl6: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl7: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl8: json.items[0].image
              });
            });
          name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
          fetch(
            `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
            {
              headers: {
                "X-Naver-Client-Id": NAVER_CLIENT_ID,
                "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
              }
            }
          )
            .then(response => response.json())
            .then(json => {
              this.setState({
                imgurl9: json.items[0].image
              });
            });
        }
        //   {
        //   for (var i = 0; i < 10; i++) {
        //     console.log(
        //       response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
        //     );
        //   }
        // }
      )
      .catch(error => {
        console.log(error);
      });
  };
  componentDidMount() {
    var day = new Date().getDate() - 1; // 어제 날짜
    if (day == 1) {
      day = 30;
    } else if (day < 10) {
      day = "0" + day;
    }
    var month = new Date().getMonth() + 1; //Current Month
    var year = new Date().getFullYear(); //Current Year
    var date = year + "" + month + day;
    this.getMovieList(date);
  }

  _onPressButton = () => {
    Alert.alert("image pressed the car");
  };
  render() {
    return (
      <SafeAreaView style={style.container}>
        <ScrollView style={style.scrollView}>
          <Text style={style.title}>MovieRanking</Text>
          <View style={style.lowContainer}>
            <TouchableOpacity onPress={this._onPressButton}>
              <View>
                <Image
                  style={style.poster}
                  source={{ uri: `${this.state.imgurl0}` }}
                />
                <Text>{this.state.name0}</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={style.button}
              onPress={this._onPressButton}
            >
              <View>
                <Image
                  style={style.poster}
                  source={{ uri: `${this.state.imgurl1}` }}
                />
                <Text>{this.state.name1}</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View style={style.lowContainer}>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{ uri: `${this.state.imgurl2}` }}
              />
              <Text>{this.state.name2}</Text>
            </View>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{ uri: `${this.state.imgurl3}` }}
              />
              <Text>{this.state.name3}</Text>
            </View>
          </View>
          <View style={style.lowContainer}>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{ uri: `${this.state.imgurl4}` }}
              />
              <Text>{this.state.name4}</Text>
            </View>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{ uri: `${this.state.imgurl5}` }}
              />
              <Text>{this.state.name5}</Text>
            </View>
          </View>
          <View style={style.lowContainer}>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{ uri: `${this.state.imgurl6}` }}
              />
              <Text>{this.state.name6}</Text>
            </View>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{ uri: `${this.state.imgurl7}` }}
              />
              <Text>{this.state.name7}</Text>
            </View>
          </View>
          <View style={style.lowContainer}>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{ uri: `${this.state.imgurl8}` }}
              />
              <Text>{this.state.name8}</Text>
            </View>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{ uri: `${this.state.imgurl9}` }}
              />
              <Text>{this.state.name9}</Text>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const style = StyleSheet.create({
  container: {
    flex: 1
  },
  scrollView: {
    // backgroundColor: "black",
    // justifyContent: "center",
    // alignItems: "center"
  },
  title: {
    fontSize: 20,
    justifyContent: "center",
    alignItems: "center"
  },
  lowContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  poster: {
    // resizeMode: "cover",
    flex: 10,
    width: "90%",
    height: 200,
    paddingHorizontal: 50
    // alignItems: "stretch"
  },
  halfContainer: {
    flex: 1,
    // justifyContent: "center",
    alignItems: "center"
  }
});