import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, Image, TouchableOpacity  } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Container, Header, Content, Accordion } from "native-base";



class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'English',
  };

  render() {
    return (
      <View style={{ width: '100%', hieght: '100%' }}>


      <View style={styles.ShadowTop} />




      <View style={styles.circle}>
        <Text style={styles.ArabicText}>
          {' مرحبا , "اسم البرنامج" \n \n هو برنامج يساعدك على تعلم اللغة الانقليزية بطريقة مبسطة وترفيهية ويساعدك على تنمية مهاراتك واكتساب بعض المهارات الجديده \n  نتمنى لك وقتا سعيدا.'}
        </Text>
      </View>

       <View style={styles.ViewButton}>
        <TouchableOpacity
          style={styles.buttonOne}
          onPress={ ()=> {this.props.navigation.navigate('Grammer')} }>
        <Text style={styles.ButtonText}>القواعد</Text>
        </TouchableOpacity>
      </View>


      <View style={styles.ViewButton}>
        <TouchableOpacity
          style={styles.buttonTwo}
          onPress={ ()=> {this.props.navigation.navigate('Quests')} }
        >
         <Text
         style={styles.ButtonText}> الاسئلة</Text>
        </TouchableOpacity>
      </View>


     <View style={styles.ViewButton}>
        <TouchableOpacity
          style={styles.buttonOne}
          onPress={ ()=> {this.props.navigation.navigate('Details')} }>
        <Text style={styles.ButtonText}>عن البرنامج</Text>
        </TouchableOpacity>
      </View>



    <Text style={styles.Text}>
      Made with love in Alsiddeq labs
    </Text>


      </View>
    );
  }
}


class DetailsScreen extends React.Component {
  static navigationOptions = {
    title: 'عن البرنامج',
  };

  render() {
    return (
      <View style={{ width: '100%', hieght: '100%', alignItems: 'canter' }}>
      <Text
        style={
          {
            color: '#a8a8a8',
            marginTop: '2%',
            alignSelf: 'center',
            fontSize: 20
          }
        }
      >

     عن البرنامج

      </Text>
      </View>
    );
  }
}




class Quests extends React.Component {
  static navigationOptions = {
    title: 'الاسئلة',
  };

  render() {
    return (
      <View style={{ width: '100%', hieght: '100%', alignItems: 'canter' }}>
      <Text
        style={
          {
            color: 'black',
            marginTop: '2%',
            marginBottom: '5%',
            alignSelf: 'center',
            fontSize: 23
          }
        }
      >

      ' Yasser ......... to school every day. ' ( Present simple )

      </Text>


      <View style={{ alignSelf: 'center' }}>
        <TouchableOpacity
          style={styles.QuestButton}
          onPress={ ()=> {alert('اجابة صحيحة')} }>
          <Text style={styles.ButtonText}>Goes</Text>
        </TouchableOpacity>
      </View>

      <View style={{ alignSelf: 'center' }}>
       <TouchableOpacity
          style={styles.QuestButton }
          onPress={ ()=> {alert('اجابة خاطئة')} }>
        <Text style={styles.ButtonText}>Didn't</Text>
        </TouchableOpacity>
      </View>

      <View style={{ alignSelf: 'center' }}>
      <TouchableOpacity
          style={styles.QuestButton}
          onPress={ ()=> {alert('اجابة خاطئة')} }>
          <Text style={styles.ButtonText}>Go</Text>
        </TouchableOpacity>
      </View>

      <View style={{ alignSelf: 'center' }}>
        <TouchableOpacity
          style={styles.QuestButton}
          onPress={ ()=> {alert('اجابة خاطئة')} }>
          <Text style={styles.ButtonText}>Went</Text>
        </TouchableOpacity>
      </View>


      </View>
    );
  }
}




const dataArray = [
  { title: "Present simple", content: "الاستخدامات : - للتحدث عن الروتين اليومي - للتحدث عن الحقائق العلمية" },
  { title: "'القاعده 2'", content: " -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --" },
  { title: "'القاعده 3'", content: " -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --" },
  { title: "'القاعده 4'", content: " -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --" },
  { title: "'القاعده 5'", content: " -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --" },


];

class Grammer extends React.Component {
  static navigationOptions = {
    title: 'القواعد',
  };

  render() {
    return (
    <Container>
     <Content padder>
        <Accordion
          dataArray={dataArray}
          icon="add"
          //expandedIcon="remove"
          iconStyle={{ color: "green" }}
          expandedIconStyle={{ color: "red" }}
        />
      </Content>
    </Container>
    );
  }
}


const styles = StyleSheet.create({
  Header: {
    backgroundColor: '#91e2f2',
    alignItems: 'center',
    justifyContent: 'center',
    height: 80,
  },

  HeaderText: {
    fontSize: 25,
    color: '#383838'
  },

  ShadowTop: {
    height: 5,
    backgroundColor: '#e5e5e5',
    opacity: 10
  },

  circle: {
    borderRadius: 100/2,
    backgroundColor: '#fff',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: '#a8a8a8',

    // Position&d //

    width: '93%',
    height: 250,
    marginTop: '4%',
    marginRight: '3%',
    marginLeft: '3%',
  },

  ArabicText: {
    color: '#383838',
    margin: '3%',
    fontSize: 23,
    writingDirection: 'rtl'
  },
  Top: {
    height: 23,
    backgroundColor: '#898989',
    //backgroundColor: 'black',
    opacity: 10
  },

  ViewButton: {
    margin: 20,
    marginLeft: '4%',
  },

  buttonOne: {
    backgroundColor: '#fff',
    borderRadius: 100/2,
    alignItems: 'center',
    marginRight: '30%',
    width: '60%',
    height: 50,
    borderWidth: 2,
    borderColor: '#a8a8a8',

  },


  QuestButton: {
    backgroundColor: '#fff',
    borderRadius: 100/2,
    alignItems: 'center',
    //marginRight: '30%',
    width: 200,
    height: 50,
    borderWidth: 2,
    borderColor: '#a8a8a8',

  },

  ButtonText: {
    fontSize: 20,
    color: '#383838',
    marginTop: 10
  },

  buttonTwo: {
    backgroundColor: '#fff',
    borderRadius: 100/2,
    alignItems: 'center',
    marginLeft: '40%',
    width: '60%',
    height: 50,
    borderWidth: 2,
    borderColor: '#a8a8a8',


  },

  BottomText: {
    fontSize: 20,
    color: '#383838'
  },

  Down: {
    backgroundColor: '#91e2f2',
    alignItems: 'center',
    height: 80,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: '0%',
  },

  ShadowDown: {
    marginTop: '5%',
    height: 5,
    backgroundColor: '#e5e5e5',
    opacity: 10,
  },

  Text: {
    fontSize: 20,
    color: '#a8a8a8',
    marginTop: '5%',
    alignSelf: 'center',
    marginBottom: 10
  }

});

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
  Grammer: {
    screen: Grammer
  },
  Quests: {
    screen: Quests
  },
}, {
  initialRouteName: 'Home',
});


export default  AppContainer = createAppContainer(AppNavigator);