import React, { Component } from 'react'
import {
  StyleSheet,
  Button,
  View,
  SafeAreaView,
  Text,
  Alert,
  ImageBackground,
  Image,
  TouchableHighlight,
  ScrollView,
} from 'react-native';
import Constants from 'expo-constants';
function Separator() {
  return <View style={styles.separator} />;
}
export default class App extends Component {
   constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  onPress = () => {
    this.setState({
      count: this.state.count+1
    })
  }
render(){
  return (
    <ScrollView>
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.head}>
          Top Chart Anime
        </Text>
        <Text style={styles.head1}>
          รวบรวมอนิเมะยอดฮิต2019
        </Text>
        <Separator />
        <Text style={styles.title}>
          Arifureta Shokugyou de Sekai Saikyou
        </Text>
        <Text style={styles.title}>
          อาชีพกระจอกแล้วทำไม ยังไงข้าก็เทพ
        </Text>
        <View>
         <Image style={styles.pic}
          style={{width: 380, height: 380}}
          source={require('./ari.jpg')}
        />
        </View>
        <Button
          title="แสดงรายละเอียด"
          onPress={() => Alert.alert('อาชีพกระจอกแล้วทำไม ยังไงข้าก็เทพ ฮาจิเมะ วัยรุ่นหนุ่มเกมโอตาคุ ได้ถูกเทพจากต่างโลกอัญเชิญมาพร้อมกับเพื่อนร่วมชั้นหลายคน จำเป็นอาศัยในโลกนี้และช่วยกอบกู้โลก ฮาจิเมะ เริ่มด้วยอาชีพนักสร้างอาวุธที่ไม่มีประโยชน์ในการต่อสู้แล้วยังถูกเหยียดหยามจากเพื่อนร่วมชั้น ที่ส่วนใหญ่ที่อยู่ในระดับนักรบและผู้กล้า แต่ภายหลังโศกนาฏกรรมครั้งใหญ่ที่เกิดกับเพื่อนร่วมชั้น ฮาจิเมะที่พยายามเอาชีวิตรอด กลายเป็นจุดเปลี่ยนชีวิตของเขา จนกลายเป็นนักสร้างอาวุธที่มีความสามารถสุดแกร่งไป')}
        />
        <TouchableHighlight
         style={styles.button}
         onPress={this.onPress}
        >
         <Text style={styles.title1}> LIKE </Text>
        </TouchableHighlight>
         <Text style={styles.title}>
          จำนวนผู้ถูกใจ
        </Text>
        <Text style={styles.title}>
          { this.state.count !== 0 ? this.state.count: null }
        </Text>
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          Isekai Cheat Magician
        </Text>
         <Text style={styles.title}>
          ผ่ามิติแหกกฎมนตรา
        </Text>
         <View>
         <Image style={styles.pic}
          style={{width: 380, height: 380}}
          source={require('./lsekai.jpg')}
        />
        </View>
        <Button
          title="แสดงรายละเอียด"
          color="#f194ff"
          onPress={() => Alert.alert('เป็นเรื่องราวของนักเรียนมัธยมสองคน Nishimura Taichi และ Azuma Rin ที่อยู่ดีๆก็หลุดไปต่างโลกแบบยุโรปยุคกลางที่มีเวทย์มนต์และมอนสเตอร์ เพื่อที่จะมีชีวิตรอดทั้งสองจึงตัดสินใจที่จะไปเป็นนักผจญภัย แต่เมื่อไปตรวจสอบพลังเวทย์ก็พบว่าทั้งคู่มีพลังที่เหนือกว่าผู้คนทั่วไปบนโลกนี้หลายเท่านัก')}
        />
        <TouchableHighlight
         style={styles.button}
         onPress={this.onPress}
        >
         <Text style={styles.title1}> LIKE </Text>
        </TouchableHighlight>
         <Text style={styles.title}>
          จำนวนผู้ถูกใจ
        </Text>
        <Text style={styles.title}>
          { this.state.count !== 0 ? this.state.count: null }
        </Text>
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          Kimetsu no Yaiba
        </Text>
        <Text style={styles.title}>
          ดาบพิฆาตอสูร
        </Text>
        <View>
         <Image style={styles.pic}
          style={{width: 380, height: 380}}
          source={require('./yaiba.jpg')}
        />
        </View>
        <Button
          title="แสดงรายละเอียด"
          color="#2AC69E"
          onPress={() => Alert.alert('เรื่องราวในยุคไทโชทันจิโร่เด็กหนุ่มขายถ่านที่แสนอ่อนโยน วันหนึ่งครอบครัวของเขาถูกอสูรฆ่าตาย ส่วนเนซึโกะ น้องสาวของเขาก็โดนเปลี่ยนเป็นอสูร ในตอนนั้นเองนักล่าอสูรนามว่า "โทมิโอกะ งิยู" ก็ได้ปรากฏตัวขึ้นและคิดจะกำจัดเนซึโกะ ทว่าเขาก็ต้องประหลาดใจที่เนซึโกะกับทันจิโร่กลับปกป้องกันและกัน ยิ่งได้เห็นฝีมือการต่อสู้ของทันจิโร่ทำให้ งิยูตัดสินใจส่งตัวพวกเขาไปให้สหายเก่าแก่ของตนเองช่วยฝึกฝนให้ นั่นจึงเป็นจุดเริ่มต้นการเป็นนักล่าอสูรของทันจิโร่ เพื่อช่วยน้องสาวให้กลับมาเป็นมนุษย์อีกครั้งและเพื่อตามล่าอสูรที่ฆ่าครอบครัวของเขา')}
        />
        <TouchableHighlight
         style={styles.button}
         onPress={this.onPress}
        >
         <Text style={styles.title1}> LIKE </Text>
        </TouchableHighlight>
         <Text style={styles.title}>
          จำนวนผู้ถูกใจ
        </Text>
        <Text style={styles.title}>
          { this.state.count !== 0 ? this.state.count: null }
        </Text>
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
        เป็นการแนะนำอนิเมะเท่านั้นจะไม่มีการสปอยใดๆทั้งสิ้น
        </Text>
        <View style={styles.fixToText}>
          <Button
            title="Previous"
            onPress={() => Alert.alert('กำลังพัฒนา')}
          />
          <Button
            title="Next"
            onPress={() => Alert.alert('กำลังพัฒนา')}
          />
        </View>
      </View>
    </SafeAreaView>
    </ScrollView>
  );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    marginHorizontal: 16,
  },
  head: {
    textAlign: 'center',
    fontSize: 50,
    marginVertical: 8,
  },
  head1: {
    textAlign: 'center',
    fontSize: 25,
    marginVertical: 8,
  },
  pic: {
    alignItems: 'center',
    marginVertical: 8,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  title1: {
    textAlign: 'center',
    marginVertical: 8,
    backgroundColor: '#C227B7',
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});