import React, { Component } from "react";
import {
  Image,
  View,
  Text,
  TextInput,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
  ScrollView
} from "react-native";
import { Card, CardItem, 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 Search extends Component {
  static navigationOptions = {
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-search" style={{ color: tintColor }} />
    )
  };

  state = {
    typing: "",
    keyword: "",
    items: [],
    info: [],
    results: []
  };

  getDB = async search => {
    axios
      .get(
        `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
      )
      .then(response => {
        this.setState({ results: response.data.results });
        console.log(response.data.results);
      });
  };

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

  searching = typing => {
    this.setState({
      keyword: typing,
      typing: ""
    });
    this.getDB(typing);
  };

  render() {
    return (
      <View>
        <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>
        </View>
        <SafeAreaView>
          <ScrollView>
            <Card>
              {this.state.results.map(result => (
                <View style={styles.lowContainer}>
                  <View style={styles.leftContainer}>
                    <CardItem>
                      {
                        <Image
                          source={{
                            uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
                          }}
                          style={styles.poster}
                        />
                      }
                    </CardItem>
                  </View>
                  <View style={styles.rightContainer}>
                    <View style={styles.rightUpContainer}>
                      <Text style={styles.name}>{result.title}</Text>
                    </View>
                    <View style={styles.rightDownContainer}>
                      <CardItem>
                        <Text style={styles.overview}>
                          {result.overview.length < 60
                            ? `${result.overview}`
                            : `${result.overview.substring(0, 57)}...`}
                        </Text>
                      </CardItem>
                    </View>
                  </View>
                </View>
              ))}
            </Card>
          </ScrollView>
        </SafeAreaView>
      </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
  },
  lowContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10
  },
  leftContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  rightContainer: {
    flex: 2
  },
  rightUpContainer: {
    flex: 1,
    paddingTop: 20,
    justifyContent: "center",
    marginLeft: 10
  },
  rightDownContainer: {
    flex: 3,
    paddingTop: 20,
    paddingBottom: 10
  },
  poster: {
    resizeMode: "cover",
    flex: 10,
    width: "30%",
    height: 160,
    paddingHorizontal: 50,
    alignItems: "stretch",
    borderRadius: 7
  },
  content: {
    flex: 1,
    flexDirection: "row"
  },
  name: {
    fontSize: 16
  },
  overview: {
    fontSize: 14
  }
});