// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/

// Import React and Component
import React from "react";
// import { StatusBar } from 'expo-status-bar';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  ImageBackground,
} from "react-native";
import ImageSliderz from "react-native-image-slideshow";
import {
  AntDesign,
  MaterialCommunityIcons,
  Ionicons,
} from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import { gamification } from "./gamification";
import { IotScreen } from "./IotScreen";

import { BottomTab } from "../Navigations/BottomTab";
// import BottomTab from "../Navigations/BottomTab";
export function HomeScreen({ navigation }) {
  //to diable the yellow box warning on the simulator
  console.disableYellowBox = true;

  return (
    <View style={styles.background}>
      <ImageBackground
        source={require("../assets/signin1.jpg")}
        style={styles.images}
      >
        <ImageSliderz
          height={400}
          dataSource={[
            {
              url: require("../assets/d.jpg"),
            },
            {
              url: require("../assets/c.jpg"),
            },
            {
              url: require("../assets/b.jpg"),
            },
          ]}
        />
        <View style={styles.HomeBtn}>

        <View>
          <TouchableOpacity
            style={styles.saveExam}
            onPress={() => navigation.navigate("gamification")}
          >
            <Ionicons name="game-controller" size={24} color="black" />
            <Text style={styles.buttonText}>Gamification</Text>
          </TouchableOpacity>
        </View>
        <View>
          <TouchableOpacity
            style={styles.Auction}
            onPress={() => navigation.navigate("AuctionHomeScreen")}
          >
            <Ionicons name="game-controller" size={24} color="black" />
            <Text style={styles.buttonText}>Auction</Text>
          </TouchableOpacity>
        </View>
        </View>

        <View style={styles.HomeBtn}>


        <View >
          <TouchableOpacity
            style={styles.IOT}
            onPress={() => navigation.navigate("IotScreen")}
            >
            <Ionicons name="game-controller" size={24} color="black" />
            <Text style={styles.buttonText}>IOT</Text>
          </TouchableOpacity>
        </View>
        <View>
          <TouchableOpacity
            style={styles.Leaderboard}
            onPress={() => navigation.navigate("Leaderboard")}
            >
            <MaterialIcons name="leaderboard" size={24} color="black" />
            <Text style={styles.buttonText}>Leaderboard</Text>
          </TouchableOpacity>
        </View>

        </View>
{/*
        <Text style={styles.heading}>
        AGRIPRENEURS. Agriculture solution provider.
        </Text>
      <Text style={styles.heading1}>Build to Empower Entrepreneurs</Text> */}
        <Text style={styles.heading2}>All Right Reserved.</Text>

      <BottomTab/>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 17,
    alignSelf: "center",
    marginTop: 15,
  },
  heading1: {
    fontSize: 15,
    alignSelf: "center",
    marginTop: 5,
  },
  heading2: {
    fontSize: 15,
    alignSelf: "center",
    marginTop: 5,
    marginBottom:10
  },
  saveExam: {
    width: "70%",
    padding: 20,
    marginTop: 25,
    marginLeft: 20,
    // marginHorizontal: 10,
    backgroundColor: "#ff426e",
    flexDirection: "row",
    marginBottom: 15,
    justifyContent: "center",
    borderRadius: 10,
  },
  buttonText: {
    color: "#000",
    fontSize: 15,
    marginLeft: 8,
  },
  background: {
    backgroundColor: "#bababa",
    height: "100%",
  },
  images: {
    height: "100%",
    justifyContent: "center",
  },
  HomeBtn:{
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent:"space-evenly",
    marginLeft:20
  },
  Auction:{
    width: "80%",
    padding: 20,
    marginTop: 25,
    backgroundColor: "#ff426e",
    flexDirection: "row",
    marginBottom: 15,
    justifyContent: "center",
    borderRadius: 10,
  },
  Leaderboard:{
    width: "75%",
    padding: 20,
    // marginTop: 25,
    backgroundColor: "#ff426e",
    flexDirection: "row",
    marginBottom: 15,
    justifyContent: "center",
    borderRadius: 10,
    marginLeft:20

  },
  IOT:{
    width: "78%",
    padding: 20,
    // marginTop: 25,
    backgroundColor: "#ff426e",
    flexDirection: "row",
    marginBottom: 15,
    justifyContent: "center",
    borderRadius: 10,
    marginLeft:20
  }
});
