import React, { Component } from 'react';
import { Image, View, Button, Text, TextInput, StyleSheet, TouchableOpacity, Alert } 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 = {
        typing: "",
        keyword: "",
        items: [[0],[0]]
    };

    getNaverApi = async (search) => {
        fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
          headers: {
            "X-Naver-Client-Id": NAVER_CLIENT_ID,
            "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
          }
        })
          .then(response => response.json())
          .then(json => this.setState({items: json.items}))};
    
    handleSearchUpdate = text => {
       this.setState({
         searchTerm: text
       });
    };
      
    searching = (typing) => {
        this.setState({
            keyword: typing,
            typing: ""
        })
        this.getNaverApi(typing)
        }
    
    viewimage(){
        return this.state.items.map( item =>
            <Image style={styles.imagecontainer}
                style={{ height: "50%", width: "50%" }}
                source={{ uri: `${item.image}`}}
                />)
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.input}> 
                    <TextInput 
                        style={styles.inputText}
                        placeholder='Search'
                        autoCorrect={ false }
                        value = {this.state.typing}
                        onChangeText= { (typing) => this.setState({typing})}
                        />
                    <TouchableOpacity onPress = {() => this.searching(this.state.typing)}>
                        <Icon name='ios-search'/>
                    </TouchableOpacity>
                </View>
                <Text>
                    {this.state.keyword}
                </Text>
                {/* <Image style={styles.imagecontainer}
                style={{ height: "50%", width: "50%" }}
                source={{ uri: `${this.state.items[1].image}` }}
                source={{ uri: `${this.state.items[0].image}` }}
                /> */}
                {this.viewimage()}
            </View>
        )}
}

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'
    },
    imagecontainer:{
        flex: 1
    }
});