import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    Image,
    Alert,
    AsyncStorage
  } from 'react-native';
import { Icon } from 'native-base';
import axios from "axios";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
import uuidv1 from "uuid/v1"; //ID 만들기위해 import


export default class WantToWatchTab extends Component {
    //네비게이션 바
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            <Icon name='ios-star' style={{ color: tintColor }} />
        )
    }

    state = {
        isLoading: true,
        info: [],
        date: "",
        imgur1: []
    };

    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,
                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
                  });
                });
            }
          )
          .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");
        
      };

      

    render() {
        return (
            <ScrollView style={style.scrollView}>
                <Text style={style.title}>MovieRanking</Text>
                <View style={style.lowContainer}>
                    <TouchableOpacity
                        style={style.button}
                        onPress={this._onPressButton}//누르는 동작
                    >
                        <Image
                            style={style.poster}
                            source={{ uri: `${this.state.imgurl0}` }}
                        />
                        <Text>{this.state.name0}</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        );
    }
}


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"
    },
  });