import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { SignIn } from "../screen/SignIn";
import { SignUp } from "../screen/SignUp";
import { HomeScreen } from "../screen/HomeScreen";
import { Leaderboard } from "../screen/Leaderboard";
import { PriceScreen } from "../screen/PriceScreen";
import { gamification } from "../screen/gamification";
import { IotScreen } from "../screen/IotScreen";
import { AboutUs } from "../screen/AboutUs";
import axios from "axios";
import HomeAuctionScreen from  "../screen/Home.Auction.Screen";
import UserAuctionListScreen from "../screen/User.Auctions.Screen";
import UserBidScreen from "../screen/User.Bids.Screen";
import AuctionListScreen from "../screen/Auctions.List.Screen";
import AuctionDetailScreen from "../screen/Auction.Detail.Screen";
import UserAuctionCreateScreen from "../screen/User.Auction.Create.Screen";
import AuctionCameraScreen from "../screen/Auction.Camera.Screen";

const Stack = createStackNavigator();

export function AuthStack({ navigation }) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="SignIn"
        component={HomeScreen}
        options={{
          // headerLeft: () => {
          //   return (
          //     <Ionicons
          //       name="md-menu"
          //       size={30}
          //       color="black"
          //       onPress={() => navigation.openDrawer()}
          //     />
          //   );
          // },
          headerStyle: {
            backgroundColor: 'white',
          },
          headerTitleAlign: "center",
          // headerRight: () => {
          //   return (
          //     <MaterialIcons name="logout"
          //      size={30}
          //      color="black"
          //       />
          //   );
          // },
        }}
      />
      <Stack.Screen
        name="SignUp"
        component={SignUp}
        options={{
          title: "Sign Up Page",
          headerTitleAlign: "center",
        }}
      />
      <Stack.Screen
        name="IotScreen"
        component={IotScreen}
        options={{
          title: "IOT Page",
          headerTitleAlign: "center",
        }}
      />
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          title: "Agripreneurs",
          headerTitleAlign: "center",
          headerLeft: () => {
            return (
              <Ionicons
                name="md-menu"
                size={30}
                color="black"
                onPress={() => navigation.openDrawer()}
              />
            );
          },
          headerStyle: {
            backgroundColor: 'white',
          },
          headerLeftContainerStyle: { paddingLeft: 10 },
          headerRight: () => {
            return (
              <MaterialIcons name="logout"
               size={30}
               color="black"
               onPress={() => axios.get("http://192.168.8.126:5000/logout", )
               .then(function (response) {
                 const stngobj = JSON.stringify(response.data)
                 console.log(stngobj + "logged out");
                 console.log("Successfully logged out");
                 alert("Successfully Logged out")
                 navigation.navigate("SignIn")
               })
               .catch(function (error) {
                 console.log(error);
                 alert("Login failed")
               })}
                />
            );
          },
        }}
      />
       <Stack.Screen
        name="Leaderboard"
        component={Leaderboard}
        options={{
          title: "Leaderboard Page",
          headerTitleAlign: "center",
          headerRight: () => {
            return (
              <MaterialIcons name="logout"
               size={30}
               color="black"
               onPress={() => axios.get("http://192.168.8.126:5000/logout", )
               .then(function (response) {
                 const stngobj = JSON.stringify(response.data)
                 console.log(stngobj + "logged out");
                 console.log("Successfully logged out");
                 alert("Successfully Logged out")
                 navigation.navigate("SignIn")
               })
               .catch(function (error) {
                 console.log(error);
                 alert("Login failed")
               })}
                />
            );
          },
        }}
      />
      <Stack.Screen
        name="PriceScreen"
        component={PriceScreen}
        options={{
          title: "Discounted/Price Page",
          headerTitleAlign: "center",
          headerRight: () => {
            return (
              <MaterialIcons name="logout"
               size={30}
               color="black"
               onPress={() => axios.get("http://192.168.8.126:5000/logout", )
               .then(function (response) {
                 const stngobj = JSON.stringify(response.data)
                 console.log(stngobj + "logged out");
                 console.log("Successfully logged out");
                 alert("Successfully Logged out")
                 navigation.navigate("SignIn")
               })
               .catch(function (error) {
                 console.log(error);
                 alert("Login failed")
               })}
                />
            );
          },
        }}
      />
      <Stack.Screen
        name="gamification"
        component={gamification}
        options={{
          title: "Gamification Page",
          headerTitleAlign: "center",
          headerRight: () => {
            return (
              <MaterialIcons name="logout"
               size={30}
               color="black"
               onPress={() => axios.get("http://192.168.8.126:5000/logout", )
               .then(function (response) {
                 const stngobj = JSON.stringify(response.data)
                 console.log(stngobj + "logged out");
                 console.log("Successfully logged out");
                 alert("Successfully Logged out")
                 navigation.navigate("SignIn")
               })
               .catch(function (error) {
                 console.log(error);
                 alert("Login failed")
               })}
                />
            );
          },
        }}
      />
      <Stack.Screen
        name="AuctionHomeScreen"
        component={HomeAuctionScreen}
        options={{
          title: "Auctions",
          headerTitleAlign: "center"
        }}
      />
      <Stack.Screen
        name="UserAuctionScreen"
        component={UserAuctionListScreen}
        options={{
          headerShown: false,
          title: "My Auctions",
          headerTitleAlign: "center"
        }}
      />
      <Stack.Screen
        name="UserBidScreen"
        component={UserBidScreen}
        options={{
          headerShown: false,
          title: "My Bids",
          headerTitleAlign: "center"
        }}
      />
      <Stack.Screen
        name="AuctionListScreen"
        component={AuctionListScreen}
        options={{
          headerShown: false,
          title: "Auctions List",
          headerTitleAlign: "center"
        }}
      />
      <Stack.Screen
        name="AuctionDetailScreen"
        component={AuctionDetailScreen}
        options={{
          headerShown: false,
          title: "Auctions List",
          headerTitleAlign: "center"
        }}
      />
      <Stack.Screen
        name="AuctionCreateScreen"
        component={UserAuctionCreateScreen}
        options={{
          headerShown: false,
          title: "Auctions List",
          headerTitleAlign: "center"
        }}
      />
       <Stack.Screen
        name="AuctionCameraScreen"
        component={AuctionCameraScreen}
        options={{
          headerShown: false,
          title: "Auctions List",
          headerTitleAlign: "center"
        }}
      />
      <Stack.Screen
        name="AboutUs"
        component={AboutUs}
        options={{
          title: "About Page",
          headerTitleAlign: "center",
        }}
      />
    </Stack.Navigator>
  );
}