import React from "react";
import {
  Dimensions,
  TouchableOpacity,
  Image,
  View,
  Keyboard
} from "react-native";
import {
  createStackNavigator,
  createDrawerNavigator,
  createSwitchNavigator
} from "react-navigation";
import { Ionicons } from "@expo/vector-icons";
import StackViewStyleInterpolator from "react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator";
import CustomDrawerContentComponent from "./CustomDrawerContentComponent";

import ComoFunciona from "../screens/ComoFunciona";
import Destaques from "../screens/Destaques";
import FaleConosco from "../screens/FaleConosco";
import Duvidas from "../screens/Duvidas";
import Favoritos from "../screens/Favoritos";
import Perfil from "../screens/Perfil";
import Filtro from "../screens/Filtro";
import Beneficio from "../screens/Beneficio";
import NaoAssinante from "../screens/NaoAssinante";
import TodosBeneficios from "../screens/TodosBeneficios";
import Login from "../screens/Login";
import Voucher from "../screens/Voucher";
import AuthLoadingScreenVoucher from "./AuthLoadingScreenVoucher";
import AuthLoadingScreenPerfil from "./AuthLoadingScreenPerfil";

const { width, height } = Dimensions.get("screen");

// Opcao para android, transicao entre telas no stacknav puxando da direta ao inves de fade bottom que eh o default
const transitionConfig = {
  transitionConfig: () => ({
    screenInterpolator: sceneProps => {
      return StackViewStyleInterpolator.forHorizontal(sceneProps);
    }
  })
};

const clickMenu = navigation => {
  navigation.openDrawer();
  Keyboard.dismiss();
};

// NAVIGATION OPTIONS
const filtroNavigationOptions = ({ navigation }) => ({
  headerStyle: {
    backgroundColor: "#1a1b5a",
    color: "white",
    height: 60
  },
  headerLeft: (
    <TouchableOpacity
      onPress={() => navigation.goBack()}
      hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
      style={{ padding: 10 }}
    >
      <Ionicons name="ios-arrow-back" size={40} color="white" />
    </TouchableOpacity>
  ),
  headerRight: (
    <TouchableOpacity
      onPress={() => clickMenu(navigation)}
      style={{ padding: 10 }}
    >
      <Ionicons name="md-menu" size={40} color="white" />
    </TouchableOpacity>
  )
});

const basicNavigationOptionsWithGoBack = ({ navigation }) => ({
  headerStyle: {
    backgroundColor: "#1a1b5a",
    color: "white",
    height: 60
  },
  headerLeft: (
    <TouchableOpacity
      onPress={() => navigation.goBack(null)}
      hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
      style={{ padding: 10 }}
    >
      <Ionicons name="ios-arrow-back" size={40} color="white" />
    </TouchableOpacity>
  ),
  headerTitle: (
    <View style={{ flex: 1, alignItems: "center" }}>
      <TouchableOpacity
        onPress={() => navigation.navigate("Destaques")}
        hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
      >
        <Image
          style={{ height: 35, width: 140 }}
          source={require("../assets/images/logo-topo.png")}
        />
      </TouchableOpacity>
    </View>
  ),
  headerRight: (
    <TouchableOpacity
      onPress={() => clickMenu(navigation)}
      style={{ padding: 10 }}
    >
      <Ionicons name="md-menu" size={40} color="white" />
    </TouchableOpacity>
  )
});

const basicNavigationOptionsWithName = ({ navigation }) => ({
  headerStyle: {
    backgroundColor: "#1a1b5a",
    color: "white",
    height: 60
  },
  headerRight: (
    <TouchableOpacity
      onPress={() => clickMenu(navigation)}
      style={{ padding: 10 }}
    >
      <Ionicons name="md-menu" size={40} color="white" />
    </TouchableOpacity>
  )
});

const basicNavigationOptions = ({ navigation }) => ({
  headerTitle: (
    <View style={{ flex: 1, alignItems: "center" }}>
      <TouchableOpacity
        onPress={() => navigation.navigate("Destaques")}
        hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
      >
        <Image
          style={{ height: 35, width: 140 }}
          source={require("../assets/images/logo-topo.png")}
        />
      </TouchableOpacity>
    </View>
  ),
  headerStyle: {
    backgroundColor: "#1a1b5a",
    color: "white",
    height: 60
  },
  headerLeft: <View />,
  headerRight: (
    <TouchableOpacity
      onPress={() => clickMenu(navigation)}
      style={{ padding: 10 }}
    >
      <Ionicons name="md-menu" size={40} color="white" />
    </TouchableOpacity>
  )
});
// FIM NAVIGATION OPTIONS

// SEM AUTENTICACAO
const DestaquesStack = createStackNavigator(
  {
    Destaques: {
      screen: Destaques,
      navigationOptions: basicNavigationOptions
    },
    Filtro: {
      screen: Filtro,
      navigationOptions: filtroNavigationOptions
    },
    Beneficio: {
      screen: Beneficio,
      navigationOptions: basicNavigationOptionsWithGoBack
    }
  },
  transitionConfig
);

const ComoFuncionaStack = createStackNavigator({
  ComoFunciona: {
    screen: ComoFunciona,
    navigationOptions: basicNavigationOptions
  }
});

const FaleConoscoStack = createStackNavigator({
  FaleConosco: {
    screen: FaleConosco,
    navigationOptions: basicNavigationOptions
  }
});

const DuvidasStack = createStackNavigator({
  Duvidas: {
    screen: Duvidas,
    navigationOptions: basicNavigationOptions
  }
});

const FavoritosStack = createStackNavigator(
  {
    Favoritos: {
      screen: Favoritos,
      navigationOptions: basicNavigationOptionsWithName
    },
    Beneficio: {
      screen: Beneficio,
      navigationOptions: basicNavigationOptionsWithGoBack
    }
  },
  transitionConfig
);

const TodosBeneficiosStack = createStackNavigator(
  {
    TodosBeneficios: {
      screen: TodosBeneficios,
      navigationOptions: basicNavigationOptions
    },
    Filtro: {
      screen: Filtro,
      navigationOptions: filtroNavigationOptions
    },
    Beneficio: {
      screen: Beneficio,
      navigationOptions: basicNavigationOptionsWithGoBack
    }
  },
  transitionConfig
);
// FIM SEM AUTENTICACAO

// NECESSARIO AUTENTICACAO
const PerfilStack = createStackNavigator({
  Perfil: {
    screen: Perfil,
    navigationOptions: basicNavigationOptionsWithName
  }
});

const LoginStack = createStackNavigator({
  Login: {
    screen: Login,
    navigationOptions: basicNavigationOptionsWithGoBack
  }
});

const NaoAssinanteStack = createStackNavigator({
  NaoAssinante: {
    screen: NaoAssinante,
    navigationOptions: basicNavigationOptionsWithGoBack
  }
});

const VoucherStack = createStackNavigator({
  Voucher: {
    screen: Voucher,
    navigationOptions: basicNavigationOptionsWithGoBack
  }
});

const AuthSwitchStackVoucher = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreenVoucher,
    Voucher: VoucherStack,
    Login: LoginStack,
    NaoAssinante: NaoAssinanteStack
  },
  {
    initialRouteName: "AuthLoading"
  }
);

const AuthSwitchStackPerfil = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreenPerfil,
    Login: LoginStack,
    Perfil: PerfilStack
  },
  {
    initialRouteName: "Perfil"
  }
);
// FIM NECESSARIO AUTENTICACAO

// MENU GAVETA/HAMBURGUER
export const DrawerNavigator = createDrawerNavigator(
  {
    Destaques: {
      screen: DestaquesStack
    },
    TodosBeneficios: {
      screen: TodosBeneficiosStack
    },
    Favoritos: {
      screen: FavoritosStack
    },
    Perfil: {
      screen: AuthSwitchStackPerfil
    },
    ComoFunciona: {
      screen: ComoFuncionaStack
    },
    FaleConosco: {
      screen: FaleConoscoStack,
      path: "destaques"
    },
    Duvidas: {
      screen: DuvidasStack
    },
    Voucher: {
      screen: AuthSwitchStackVoucher
    }
  },
  {
    initialRouteName: "Destaques",
    drawerLockMode: "locked-closed",
    drawerWidth: width,
    drawerPosition: "right",
    contentComponent: CustomDrawerContentComponent
  }
);