import { createStackNavigator } from 'react-navigation-stack'
import RegisterScreen from '../screens/login/Register'
import { TouchableOpacity } from 'react-native'
import React from 'react'
import RegisterProfileScreen from '../screens/login/RegisterProfile'
import RegisterFormLoginScreen from '../screens/login/RegisterFormLogin'
import Icon from 'src/components/Icon'
import LoginScreen from '../screens/login/Login'
import Text from 'src/components/Text';
import { t } from '../utils/i18n';

const screenConfig = (screen, title) => ({
  screen,
  navigationOptions: defaultNavOption(title)
})

const defaultNavOption = (title) => ({ navigation }) => ({
  title: title,
  headerStyle: {
    backgroundColor: '#3AA40C',
    //backgroundColor: '#FF9500',
    height: 50,
    elevation: 0,
    shadowOpacity: 0,
    // border:0
  },
  headerTintColor: '#000',
  headerTitleStyle: {

    fontSize: 16,
    color: '#fff',
    textAlign: 'left',
    flex: 1,
    // marginTop: 5,
    marginLeft: 0,
    // backgroundColor: 'red'
    fontFamily: 'Prompt-Regular',
    fontWeight: undefined,
  },
  headerTitleContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    // marginLeft: -20,
    // backgroundColor: 'red'
  },
  headerLeftContainerStyle: {
    // flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: '10%',
    // backgroundColor: 'green'

  },
  headerTitleAllowFontScaling: false,

  headerLeft: (
    <TouchableOpacity
      style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center'}}
      onPress={() => navigation.goBack()}>
      <Icon name="ic_back" size={20} color="#fff"/>
    </TouchableOpacity>
  ),
  headerRight: (
    <TouchableOpacity>
      {/*<Icon name="ic_back" size={20} color="#fff"/>*/}
    </TouchableOpacity>
  )
})

const AuthStack = createStackNavigator({
  Login: {
    screen: LoginScreen,
     navigationOptions: ({ navigation }) => ({
      title: t('login'),
      headerStyle:{
        backgroundColor: '#00420A',
      },
      headerTitleStyle: {

        fontSize: 18,
        color: '#fff',
        fontFamily: 'Prompt-Regular',
        fontWeight: undefined,
      },  headerLeftContainerStyle: {
        // flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: '10%',
        // backgroundColor: 'green'

      },
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate('HomeScreen')}>
          <Icon name={'ic_back'} color={'white'} size={18}/>
        </TouchableOpacity>
      )
    })
  },
  Register: screenConfig(RegisterScreen, t('register')),
  RegisterFormLogin: screenConfig(RegisterFormLoginScreen, t('register')),
  RegisterProfile: screenConfig(RegisterProfileScreen, t('register'))
}, {
  defaultNavigationOptions: {
    title: 'Welcome',
    navigationOptions: ({ navigation }) => ({
      title: 'Register',
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Icon name={'ic_back'}  size={16}/>
        </TouchableOpacity>
      )
    })
  }
})

export default AuthStack
