import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  SafeAreaView,
  ScrollView,
  Alert,
  TouchableOpacity
} 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: [],
    overview0: [],
    overview1: []
  };
  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;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({
              imgurl0: response.data.results[0].poster_path,
              overview0: response.data.results[0].overview
            });
          });

        name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({
              imgurl1: response.data.results[0].poster_path,
              overview1: response.data.results[0].overview
            });
          });

        name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({ imgurl2: response.data.results[0].poster_path });
          });
        name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({ imgurl3: response.data.results[0].poster_path });
          });
        name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({ imgurl4: response.data.results[0].poster_path });
          });
        name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({ imgurl5: response.data.results[0].poster_path });
          });
        name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({ imgurl6: response.data.results[0].poster_path });
          });
        name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({ imgurl7: response.data.results[0].poster_path });
          });
        name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({ imgurl8: response.data.results[0].poster_path });
          });
        name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
        axios
          .get(
            `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
          )
          .then(response => {
            this.setState({ imgurl9: response.data.results[0].poster_path });
          });
      })
      .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(temp) {
    Alert.alert(temp);
  }
  render() {
    return (
      <SafeAreaView style={style.container}>
        <ScrollView style={style.scrollView}>
          <View style={style.lowContainer}>
            <View style={style.leftContainer}>
              <TouchableOpacity
                onPress={this._onPressButton.bind(this, `${this.state.name0}`)}
              >
                <Image
                  style={style.poster}
                  source={{
                    uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl0}`
                  }}
                />
              </TouchableOpacity>
            </View>
            <View style={style.rightContainer}>
              <View style={style.rightUpContainer}>
                <Text style={style.name}>{this.state.name0}</Text>
              </View>
              <View style={style.rightDownContainer}>
                <Text>
                  {this.state.overview0.length < 60
                    ? `${this.state.overview0}`
                    : `${this.state.overview0.substring(0, 57)}...`}
                </Text>
              </View>
            </View>
          </View>
          <View style={style.lowContainer}>
            <View style={style.leftContainer}>
              <TouchableOpacity
                onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
              >
                <Image
                  style={style.poster}
                  source={{
                    uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
                  }}
                />
              </TouchableOpacity>
            </View>
            <View style={style.rightContainer}>
              <View style={style.rightUpContainer}>
                <Text style={style.name}>{this.state.name1}</Text>
              </View>
              <View style={style.rightDownContainer}>
                <Text style={style.overview}>{this.state.overview1}</Text>
              </View>
            </View>
          </View>
          {/* <View style={style.lowContainer}>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{
                  uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}`
                }}
              />
              <Text>{this.state.name2}</Text>
            </View>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{
                  uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl3}`
                }}
              />
              <Text>{this.state.name3}</Text>
            </View>
          </View>
          <View style={style.lowContainer}>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{
                  uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}`
                }}
              />
              <Text>{this.state.name4}</Text>
            </View>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{
                  uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl5}`
                }}
              />
              <Text>{this.state.name5}</Text>
            </View>
          </View>
          <View style={style.lowContainer}>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{
                  uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl6}`
                }}
              />
              <Text>{this.state.name6}</Text>
            </View>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{
                  uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl7}`
                }}
              />
              <Text>{this.state.name7}</Text>
            </View>
          </View>
          <View style={style.lowContainer}>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{
                  uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl8}`
                }}
              />
              <Text>{this.state.name8}</Text>
            </View>
            <View style={style.halfContainer}>
              <Image
                style={style.poster}
                source={{
                  uri: `https://image.tmdb.org/t/p/original/${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",
    // backgroundColor: "black",
    // alignContent: "space-around",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10
  },
  halfContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  leftContainer: {
    flex: 1,
    // backgroundColor: "yellow",
    justifyContent: "center",
    alignItems: "center"
  },
  rightContainer: {
    flex: 2
    // flexDirection: "column",
    // backgroundColor: "yellow"
  },
  rightUpContainer: {
    flex: 1,
    paddingTop: 20,
    // backgroundColor: "blue",
    justifyContent: "center",
    marginLeft: 10
    // alignItems: "center"
  },
  rightDownContainer: {
    flex: 3,
    // backgroundColor: "red",
    // margin: "5%"
    paddingTop: 20,
    paddingBottom: 10
    // justifyContent: "center",
    // alignItems: "center"
  },
  poster: {
    resizeMode: "cover",
    flex: 10,
    width: "30%",
    height: 160,
    paddingHorizontal: 50,
    alignItems: "stretch",
    borderRadius: 7
  },
  name: {
    fontSize: 16
  },
  overview: {
    fontSize: 14
  }
});