import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    AsyncStorage,
    ScrollView,
    //불러오기 위한 것
    Image,
} 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";


export default class App extends Component {
    state = {
        date: "", //날짜
        imgurl0: [], //이미지
        name0: [], //제목
    };

    //날짜 정하기
    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);
      }

    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,
              });
    
              temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
              fetch(
                `https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
                {
                  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);
          });
      };
    
    //네비게이션 바
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            <Icon name='ios-star' style={{ color: tintColor }} />
        )
    }

    //저장 함수
    saveData() {
        AsyncStorage.setItem('test', this.state.name0);
    }

    //출력 함수
    displayData = async () => {
        try {
            let user = await AsyncStorage.getItem('test');
            alert(user);
        }
        catch (error) {
            alert(error)
        }
    }


    render() {
        return (
            <View style={styles.container}>
                <View style={styles.top}>
                    <TouchableOpacity onPress={this.saveData.bind(this)}>
                        <Image
                            style={styles.poster}
                            source={{ uri: `${this.state.imgurl0}` }}
                        />
                        <Text>{this.state.name0}</Text>
                        <Text style={styles.textStyle}>영화 정보 저장</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.bottom}>
                    <TouchableOpacity onPress={this.displayData}>
                        <Text style={styles.textStyle}>영화 정보 출력</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center"
    },
    top: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
    },
    bottom: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    textStyle: {
        fontSize: 25,
    },
    poster: {
        flex: 5,
        paddingHorizontal: 50
    },
});