import React, { Component } from 'react';
import { Image, View, Button, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
import { Icon } from 'native-base';
import axios from "axios";
import { AsyncStorage } from "react-native";

const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";

export default class Search extends Component {
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            <Icon name='ios-search' style={{ color: tintColor }} />
        )
    }

    state = {
        movieName: "",
        imgurl: []
      };
/*
      getNaverApi = async () => {
        fetch(`https://openapi.naver.com/v1/search/movie.json?query=${this.state.movieName}`, {
          headers: {
            "X-Naver-Client-Id": NAVER_CLIENT_ID,
            "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
          }
        })
          .then(response => response.json())
          .then(json => {
            this.setState({
                imgurl: json.items[0].image
          });
      });
      getMovieList = async () => {
        axios
          .get(
            `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129`
          )
          .then(response => {
            for (var i = 0; i < 10; i++) {
              console.log(
                response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
              );
            }
          })
          .catch(error => {
            console.log(error);
          });
      };
    }
      componentDidMount() {
        this.getNaverApi();
      }
*/    
      addinput = () => {
        this.setState(
            
        )
    }

    handleSearchUpdate = text => {
       this.setState({
         searchTerm: text
       });
    };
      

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.input}> 
                    <TextInput 
                        style={styles.inputText}
                        placeholder='Search'
                        autoCorrect={ false }
                        value = {this.state.movieName}
                        onChangeText= { (movieName) => this.setState({movieName})}
                        />
                    <TouchableOpacity on PressOut = {this.add}>
                        <Icon name='ios-search'/>
                    </TouchableOpacity>

                </View>
                <Text>
                    {this.state.imgurl}
                </Text>
            </View>
        )
    }
    controlMovie = text => {
        this.setState({
            movieName: text
        });
    }
}

const styles = StyleSheet.create({
    container: {
        marginLeft: 50,
        marginRight: 50,
    },
    input: {
        borderRadius: 10,
        backgroundColor: "#FFF",
        paddingLeft: 10,
        paddingRight: 10,
        height: 50,
        alignItems: "center",
        flexDirection: 'row',
        justifyContent: 'space-between',
        borderBottomColor: "#bbb",
        borderBottomWidth: StyleSheet.hairlineWidth,
    },
    inputText: {
        flex: 1,
    },
    addBtn: {
        color: '#4169E1'
    }
});