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";
import MovieRankingTab from './MovieRankingTab';
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";


export default class App extends Component {
    state = {
        list: "", //영화 제목 list
        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);
        this.setData();
      }

    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 }} />
        )
    }

    //Data 설정함수
    setData = async () => {
        try {
          //요거 바꿔봤다
          this.state.list = await AsyncStorage.getItem('MovieLists'); //List에 받아온다
          console.log(this.state.list); //잘 뜨는데??
        }
        catch (error) {
            alert(error)
        }
    }


    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.componentDidMount.bind(this)}>
                    {/* 버튼 누르면 리스트 갱신됩니다 */}
                    <Image source = {require('../../assets/refresh.png')} />
                    {/* <Text style={styles.textStyle}>Refresh Button</Text> */}
                </TouchableOpacity>
                <Text style={styles.textStyle}>{this.state.list}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "black",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  textStyle: {
    fontSize: 25,
    color: "white",
},
});