import React, {useCallback, useRef, useState} from 'react'
import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native'
import Image from 'react-native-fast-image'
import {createBottomTabNavigator} from 'react-navigation-tabs'
import { createStackNavigator } from 'react-navigation-stack'
import NewsScreen from '../screens/news/News'
import RoomScreen from '../screens/room/Room'
import ProductScreen from '../screens/product/Product'
import MeterScreen from '../screens/meters/Meter'
import BillScreen from '../screens/bill/Bill'
import NotificationScreen from '../screens/notification/Notification'
import ServiceScreen from '../screens/service/Service'
import NewsDetailScreen from '../screens/news/NewsDetail'
import RoomDetailScreen from '../screens/room/RoomDetail'
import SettingsNotificationScreen from '../screens/service/SettingNotification'
import SuggestionScreen from '../screens/service/Suggestion'
import EditProfileScreen from '../screens/profile/EditProfile'
import ProfileScreen from '../screens/profile/Profile'
import Icon from 'src/components/Icon'
import PersonRoomReservationScreen from '../screens/room/PersonRoomReservation'
import CompanyRoomReservationScreen from '../screens/room/CompanyRoomReservation'
import RoomHeaderReservationScreen from '../screens/room/RoomHeaderReservation'
import Text from 'src/components/Text'
import {bindActionCreators} from 'redux'
import {appCleanUser, appSetNotification, setServerMode} from '../redux/app/action'
import {connect, useDispatch, useSelector} from 'react-redux'
import PaymentScreen from '../screens/bill/Payment'
import MessageObject from '../screens/object/MessageObject'
import MessageObjectDetail from '../screens/object/MessageObjectDetail'
import RegisterScreen from '../screens/login/Register'
import RegisterProfileScreen from '../screens/login/RegisterProfile'
import RegisterFormLoginScreen from '../screens/login/RegisterFormLogin'
import LoginScreen from '../screens/login/Login'
import SignaturePadScreen from '../screens/object/SignaturePadScreen'
import WaterMeter from '../screens/meters/WaterMeter'
import PEAMeter from '../screens/meters/PEAMeter'
import ZoneAreaScreen from '../screens/room/ZoneAreaScreen'
import RepairServiceDetail from '../screens/repair/RepairServiceDetail'
import RepairService from '../screens/repair/RepairService'
import RepairIndex from '../screens/repair/RepairIndex'
import RepairConfirm from '../screens/repair/RepairConfirm'
import RepairHistory from '../screens/repair/RepairHistory'
import RepairSuccess from '../screens/repair/RepairSuccess'
import RepairHistoryDetail from '../screens/repair/RepairHistoryDetail'
import RewardScreen from '../screens/reward/RewardScreen'
import RewardDetailScreen from '../screens/reward/RewardDetailScreen'
import QuestionScreen from '../screens/service/QuestionScreen'
import TermsAndCondition from '../screens/login/TermsAndCondition'
import MoveOutScreen from "../screens/service/MoveOutScreen";
import RoomReservation from "../screens/room/RoomReservationWebView";
import {locale, t} from 'src/utils/i18n'
import {store} from 'src/redux/store'
import RedeemScreen from "../screens/redeem/RedeemScreen";
import HistoryRedeem from "../screens/redeem/HistoryRedeem";
import AllRewards from "../screens/redeem/AllRewards";
import MyRewards from "../screens/redeem/MyRewards";
import RewardDetail from "../screens/redeem/RewardDetail";
import RewardTermCondition from "../screens/redeem/RewardTermCondition"
import ScanCoupon from "../screens/redeem/ScanCoupon";
import ForgetPasswordScreen from '../screens/forget_password/ForgetPasswordScreen'
import VerifyOTP from '../screens/forget_password/VerifyOTP'
import PasswordCode from '../screens/forget_password/PasswordCode'
import PaymentDetail from '../screens/bill/PaymentDetail'
import PaymentConfirm from '../screens/bill/PaymentConfirm'
import MembershipLevelDetail from '../screens/redeem/MembershipLeveDetail'
import MemberPoinExpire from '../screens/redeem/MemberPoinExpire'

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

const NavWithRightIcon = (title, iconName, routeName) => ({ navigation }) => ({
  title: t(title),
  headerStyle: {
    backgroundColor: '#00420A',
    height: 75,
    elevation: 0,
    shadowOpacity: 0,
  },
  headerTintColor: '#000',
  headerTitleStyle: {
    fontWeight: '400',
    fontSize: 18,
    color: '#fff',
    textAlign: 'left',
    flex: 1,
    fontFamily: 'Prompt-Regular',
    marginLeft: 0,

  },
  headerTitleContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerLeftContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '10%',
  },
  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 style={{ paddingRight: 16 }} onPress={() => {navigation.navigate(routeName)}}>
      <Icon name={iconName} color={'white'} size={20}/>
    </TouchableOpacity>
  )
})

const defaultNavOption = (title, backgroundColor) => ({ navigation }) => ({
  title: t(title),
  headerStyle: {
    backgroundColor: backgroundColor || '#00420A',
    height: 75,
    marginTop: 0,
    elevation: 0,
    shadowOpacity: 0,
  },
  headerTintColor: '#000',
  headerTitleStyle: {
    fontWeight: '400',
    fontSize: 18,
    color: '#fff',
    textAlign: 'left',
    flex: 1,
    fontFamily: 'Prompt-Regular',
    marginLeft: 0,

  },
  headerTitleContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerLeftContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '10%',
  },
  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 BottomTab = createBottomTabNavigator({
    HomeScreen: {
      screen: NewsScreen,
      navigationOptions: ({ navigation }) => ({
        tabBarVisible: true,
        tabBarLabel: ({ focused, tintColor }) => {
          if (focused) {
            tintColor = '#FFCC00'
          } else {
            tintColor = 'rgba(255, 255, 255, 0.65)'
          }

          return <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Icon name={'ic_newspaper'} size={20} color={tintColor}/>
            <Text style={[styles.textBottomTab, { color: tintColor }]}>{t('news')}</Text>
          </View> /* 'Room' */
        },
        tabBarIcon: ({ focused, tintColor }) => {
          if (focused) {
            tintColor = '#FFCC00'
          } else {
            tintColor = 'rgba(255, 255, 255, 0.65)'
          }
          return <View></View>
        }
      })
    },
    RoomScreen: {
      // screen: ZoneAreaScreen,
      screen: RoomReservation,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: ({ focused, tintColor }) => {
          if (focused) {
            tintColor = '#FFCC00'
          } else {
            tintColor = 'rgba(255, 255, 255, 0.65)'
          }
          return <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Icon name={'ic_bed-outline'} size={22} color={tintColor}/>
            <Text style={[styles.textBottomTab, { color: tintColor }]}>{t('room')}</Text>
          </View> /* 'Room' */
        },
        tabBarIcon: ({ focused, tintColor }) => {
          if (focused) {
            tintColor = '#FFCC00'
          } else {
            tintColor = 'rgba(255, 255, 255, 0.65)'
          }
        }
      })
    },
    FavorsScreen: {
      screen: RewardScreen,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: ({ focused, tintColor }) => {
          if (focused) {
            tintColor = '#FFCC00'
          } else {
            tintColor = 'rgba(255, 255, 255, 0.65)'
          }
          return <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Icon name={'ic_star_sq'} size={20} color={tintColor}/>
            <Text style={[styles.textBottomTab, { color: tintColor }]}>{t('products')}</Text>
          </View> /* 'Favaors' */
        },
        tabBarIcon: ({ focused, tintColor }) => {
          if (focused) {
            tintColor = '#FFCC00'
          } else {
            tintColor = 'rgba(255, 255, 255, 0.65)'
          }
        }
      })
    },
    ServiceScreen: {
      screen: ServiceScreen/* ServiceScreen */,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: ({ focused, tintColor }) => {
          if (focused) {
            tintColor = '#FFCC00'
          } else {
            tintColor = 'rgba(255, 255, 255, 0.65)'
          }

          return <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Icon name={'ic_grid'} size={20} color={tintColor}/>
            <Text style={[styles.textBottomTab, { color: tintColor }]}>{t('service')}</Text>
          </View> /* 'Room' */
        },
        tabBarIcon: ({ focused, tintColor }) => {
          if (focused) {
            tintColor = '#FFCC00'
          } else {
            tintColor = 'rgba(255, 255, 255, 0.65)'
          }
        }
      })
    }
  },
  {
    tabBarOptions: {
      activeTintColor: '#FFCC00',
      tabStyle: { backgroundColor: '#00420A', color: 'rgba(255, 255, 255, 0.65)' },
    }
  })
//export default LoginScreen
const mapDisPatchToProps = state => {
  return state.app
}
const setNotification = dispatch => bindActionCreators({ appSetNotification }, dispatch)
const NotificationIcon = connect(mapDisPatchToProps, setNotification)(({ count_noti, user }) => {
  let count = 0
  if (count_noti) {
    count = count_noti
  }
  if (count > 0) {
    return <View>
      <View
        style={{
          width: 16,
          height: 16,
          backgroundColor: '#FF2D55',
          borderRadius: 50,
          justifyContent: 'center',
          alignItems: 'center',
          position: 'absolute',
          right: '10%',
          top: '-10%',
          zIndex: 1,
          roomLength: 0
        }}>
        <Text style={{ color: 'white', fontSize: 8 }}>{count && count > 9 ? '9+' : count}</Text>
      </View>
      <View style={{ marginRight: 10 }}>
        <Icon name={'ic_bell'} size={20} color={'white'}/>
      </View>
    </View>
  } else {
    return (
      <View>
        <View style={{ marginRight: 10 }}>
          <Icon name={'ic_bell'} size={20} color={'white'}/>
        </View>
      </View>
    )
  }
})

const MainTitle = connect(state => ({
  user: state.app.user,
  state_app: state.app,
}))((props) => {
  let userText = ''
  let room = ''
  let roomPopup = ''
  let name = ''
  let projectName = ''
  console.log('props.user.', props.user)
  console.log('props.state_app:', props.state_app)
  if (props.user && typeof props.user.room != 'undefined') {
    room = ' ' + props.user.room
    roomPopup = props.user.room
    // console.log('room',room)
    if (room.length >= 16) {
      room = room.substring(0, 16) + '...'
    }
  }

  if (props.user && typeof props.user.name != 'undefined') {
    name = props.user.name.split(' ')
  }
  if (props.user) {
    userText = `${name[0]}`;
    projectName = props.user.project_name
  }
  return <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '89%'}}>
            <View>
              <Text style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 10, marginTop: 3, marginBottom: 5 }}>{t('charoensin_asset')} {projectName}</Text>
            </View>
            <View>
             <Text style={{color: 'white'}}>2.0</Text>
            </View>
         </View>
})

const MainHeader = ({ navigation }) => {
  const lastCount = useRef(0)
  const counter = useRef(0)
  const [showModal, setShowModal] = useState(false)
  const dispatch = useDispatch()
  const server_mode = useSelector(state => state.app.server_mode)
  const openSecretChamber = useCallback(() => {
    const t = new Date().getTime()
    if (t - lastCount.current < 500) {
      if (++counter.current >= 10) {
        setShowModal(true)
      }
    } else {
      counter.current = 1
    }
    lastCount.current = t
  }, [])

  const changeServer = useCallback((mode) => {
    dispatch(setServerMode(mode))
    setShowModal(false)
  }, [])
  return <View style={[{ flex: 1, alignItems: 'center', flexDirection: 'row', marginTop: 0, paddingLeft: 10, backgroundColor: server_mode === 'develop' ? '#ff0000' : 'transparent' }]}>
    <TouchableOpacity
      onPress={openSecretChamber}
      activeOpacity={1}>
      <Image
        style={{ width: 35, height: 35, }}
        source={require('../../assets/images/logo_white_border.png')}
      />
    </TouchableOpacity>
    <MainTitle/>
    <Modal transparent={true} visible={showModal}>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10 }}>
          <View>
            <Text>ตั้งค่า Server</Text>
          </View>
          <View style={{ marginTop: 10 }}>
            <TouchableOpacity style={{ padding: 10 }} onPress={() => changeServer('production')}>
              <Text style={{ color: server_mode == 'production' ? '#004287' : '#aaa' }}>PRODUCTION</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{ padding: 10 }} onPress={() => changeServer('develop')}>
              <Text style={{ color: server_mode == 'develop' ? '#004287' : '#aaa' }}>DEVELOP</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  </View>
}

const HeaderLeftComponent = (navigation, routeName = null, propsRoute = null) => {
  return (
    <TouchableOpacity
      style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', }}
      onPress={() => routeName ? navigation.navigate(routeName, propsRoute || null) : navigation.goBack()}>
      <Icon name="ic_back" size={20} color="#fff"/>
    </TouchableOpacity>
  )
}

const defaultHeaderStyle = () => {
  return {
    headerStyle: styles.defaultHeaderStyle,
    headerTintColor: '#000',
    headerTitleStyle: styles.defaultHeaderTitleStyle,
    headerTitleContainerStyle: styles.defaultHeaderTitleContainerStyle,
    headerLeftContainerStyle: styles.defaultHeaderLeftContainerStyle,
    headerTitleAllowFontScaling: false,
  }
}

const AppStack = createStackNavigator({
  BottomTab: {
    screen: BottomTab,
    navigationOptions: ({navigation}) => {
      let langIcon
      console.log('locale >>> ', locale());
      
      switch (locale()) {
        case 'th':
          langIcon = require('../../assets/images/locale_th.png')
          break
        case 'my':
          langIcon = require('../../assets/images/locale_my.png')
          break
        case 'km':
          langIcon = require('../../assets/images/locale_km.png')
          break
        default:
          langIcon = require('../../assets/images/locale_en.png')
          break
      }
      return {
        // title: 'Charoensin Condo',
        headerStyle: {
          backgroundColor: '#00420A',
          height: 75,
          marginTop: 0,
          elevation: 0,
          shadowOpacity: 0,
        },
        headerTitleStyle: {
          fontWeight: '200',
          fontSize: 20,
          color: '#fff',
          textAlign: 'left',
          flex: 1,
          marginLeft: 30,
        },
        headerRight: (
          <View style={{marginRight: 0, justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
            <TouchableOpacity onPress={() => navigation.navigate('LanguageSelect')} style={{marginRight: 8}}>
              <View style={{width: 30, height: 30, alignItems: 'center', justifyContent: 'center'}}>
                <Image style={{width: 25, height: 25}} source={langIcon}/></View>
            </TouchableOpacity>
            <TouchableOpacity style={{marginRight: 6}} onPress={() => navigation.navigate('Notification')}>
              <NotificationIcon/>
            </TouchableOpacity>
          </View>
        ),
        headerLeftContainerStyle: {
          width: '80%',
          alignItems: 'center',
          justifyContent: 'center',
        },
        headerLeft: () => <MainHeader navigation={navigation}/>,
      }

    }

  },
  Room: screenConfig(RoomScreen, 'project'),
  RoomDetail: screenConfig(RoomDetailScreen, 'room_detail'),
  ZoneArea: screenConfig(ZoneAreaScreen, 'room_detail'),
  PersonRoomReservation: screenConfig(PersonRoomReservationScreen, 'book_room'),
  CompanyRoomReservation: screenConfig(CompanyRoomReservationScreen, 'book_room'),
  RoomHeaderReservation: screenConfig(RoomHeaderReservationScreen, 'book_room'),
  News: {
    screen: NewsScreen,
    navigationOptions: ({navigation}) => ({
      title: t('charoensin_asset'),
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text> {'<'}  </Text>
        </TouchableOpacity>
      )
    })
  },
  NewsDetail: {
    screen: NewsDetailScreen,
    navigationOptions: ({navigation}) => ({
      title: '',
      headerStyle: {
        backgroundColor: '#00420A',
        height: 75,
        marginTop: 0,
        elevation: 0,
        shadowOpacity: 0,
      },
      headerTitleStyle: {
        fontWeight: '200',
        fontSize: 20,
        color: '#fff',
        flex: 1,
        marginLeft: 10,
      },
      headerLeft: null,
      headerRight: (
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text style={{color: '#fff', fontSize: 16}}>  {t('close')}  </Text>
        </TouchableOpacity>
      )
    })
  },
  Product: {
    screen: ProductScreen,
    navigationOptions: ({navigation}) => ({
      title: t('products'),
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text> {'<'}  </Text>
        </TouchableOpacity>
      )
    })
  },
  Notification: screenConfig(NotificationScreen, 'notification')
  // {
  //   screen: NotificationScreen,
  //   navigationOptions: ({navigation}) => ({
  //     title: 'Notification',
  //     headerLeft: (
  //       <TouchableOpacity onPress={() => navigation.goBack()}>
  //         <Text> {'<'}  </Text>
  //       </TouchableOpacity>
  //     )
  //   })
  // }
  ,
  Meter: screenConfig(MeterScreen, 'smart_meter'),
  WaterMeter: screenConfig(WaterMeter, 'save_water_meter'),
  PEAMeter: screenConfig(PEAMeter, 'save_electric_meter'),
  // Bill: screenConfig(BillScreen, 'รายละเอียดยอดค้างชำระ'),
  Bill: screenConfig(BillScreen, 'outstanding_balance_detail'),
  Payment: screenConfig(PaymentScreen, 'pay'),
  PaymentDetail: screenConfig(PaymentDetail, 'payment_detail'),
  PaymentConfirm: screenConfig(PaymentConfirm, 'payment_detail'),
  SettingsNotification: screenConfig(SettingsNotificationScreen, 'noti_setting'),
  MoveOut: screenConfig(MoveOutScreen, 'move_out'),
  Suggestion: screenConfig(SuggestionScreen, 'suggestion'),
  Question: {
    screen: QuestionScreen,
    navigationOptions: ({navigation}) => ({
      title: t('faqs'),
      headerStyle: {
        backgroundColor: '#00420A',
        marginTop: 0,
        height: 75
      },
      headerTitleStyle: {
        fontSize: 18,
        color: '#fff',
        fontFamily: 'Prompt-Regular',
        fontWeight: undefined,
        textAlign: 'left',
        flex: 1,
        marginLeft: 0
      }, headerLeftContainerStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        width: '10%',

      },
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.goBack()} style={{flex: 1, alignItems: 'center'}}>
          <Icon name={'ic_back'} color={'white'} size={20}/>
        </TouchableOpacity>
      ),
      headerRight: (
        <TouchableOpacity onPress={() => navigation.state.params.onRefreshMessage()} style={{paddingRight: 16}}>
          <Icon name={'ic_refresh'} color={'white'} size={20}/>
        </TouchableOpacity>
      )
    })
  },
  Profile: screenConfig(ProfileScreen, 'profile', '#3AA40C'),
  EditProfile: screenConfig(EditProfileScreen, 'edit_profile', '#3AA40C'),
  Object: {
    screen: MessageObject,
    navigationOptions: ({navigation}) => ({
      title: t('mail_and_parcel'),
      headerStyle: {
        backgroundColor: '#00420A',
        height: 75,
        elevation: 0,
        shadowOpacity: 0,
      },
      headerTintColor: '#000',
      headerTitleStyle: {
        fontWeight: '400',
        fontSize: 18,
        color: '#fff',
        textAlign: 'left',
        flex: 1,
        fontFamily: 'Prompt-Regular',
        marginLeft: 0,

      },
      headerTitleContainerStyle: {
        alignItems: 'center',
        justifyContent: 'center',
      },
      headerLeftContainerStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        width: '10%',
      },
      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>
      )
    })
  },
  ObjectDetail: screenConfig(MessageObjectDetail, 'mail_and_parcel'),
  Signature: screenConfig(SignaturePadScreen, 'please_sign'),
  Login: {
    screen: LoginScreen,
    navigationOptions: ({navigation}) => ({
      title: t('login'),
      headerStyle: {
        backgroundColor: '#00420A',
        marginTop: 0,
        height: 75
      },
      headerTitleStyle: {

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

      },
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate('HomeScreen')}>
          <Icon name={'ic_back'} color={'white'} size={20}/>
        </TouchableOpacity>
      )
    })
  },
  //Forget Password Screen
  ForgetPassword: {
    screen: ForgetPasswordScreen,
    navigationOptions: ({navigation}) => ({
      title: t('forget_password'),
      headerStyle: styles.defaultHeaderStyle,
      headerTitleStyle: {
        ...styles.defaultHeaderTitleStyle,
        fontWeight: undefined,
      },
      headerLeftContainerStyle: styles.defaultHeaderLeftContainerStyle,
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate('HomeScreen')}>
          <Icon name={'ic_back'} color={'white'} size={20}/>
        </TouchableOpacity>
      )
    })
  },
  VerifyOTP: {
    screen: VerifyOTP,
    navigationOptions: ({navigation}) => ({
      title: t('verify_otp'),
      headerStyle: styles.defaultHeaderStyle,
      headerTitleStyle: {
        ...styles.defaultHeaderTitleStyle,
        fontWeight: undefined,
      },
      headerLeftContainerStyle: styles.defaultHeaderLeftContainerStyle,
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate('ForgetPassword')}>
          <Icon name={'ic_back'} color={'white'} size={20}/>
        </TouchableOpacity>
      )
    })
  },
  PasswordCode: {
    screen: PasswordCode,
    navigationOptions: ({navigation}) => ({
      title: t('new_password'),
      headerStyle: styles.defaultHeaderStyle,
      headerTitleStyle: {
        ...styles.defaultHeaderTitleStyle,
        fontWeight: undefined,
      },
      headerLeftContainerStyle: styles.defaultHeaderLeftContainerStyle,
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate('VerifyOTP')}>
          <Icon name={'ic_back'} color={'white'} size={20}/>
        </TouchableOpacity>
      )
    })
  },
  //Register Screen
  Register: screenConfig(RegisterScreen, 'register'),
  RegisterFormLogin: screenConfig(RegisterFormLoginScreen, 'register'),
  RegisterProfile: screenConfig(RegisterProfileScreen, 'register'),
  //Repair Service
  /*RepairService: {
    screen: RepairService,
    navigationOptions: NavWithRightIcon('request_repair_and_Other', 'ic_clock_history', 'RepairHistory')
  },*/
  Repair: screenConfig(RepairIndex, 'request_repair'),
  RepairDetail: screenConfig(RepairServiceDetail, 'service_detail'),
  RepairConfirm: screenConfig(RepairConfirm, 'confirm_info'),
  RepairHistory: screenConfig(RepairHistory, 'repair_history'),
  RepairSuccess: screenConfig(RepairSuccess, 'request_sent'),
  // RepairHistoryDetail: screenConfig(RepairHistoryDetail, 'repair_history_detail'),
  RepairHistoryDetail: {
    screen: RepairHistoryDetail,
    navigationOptions: ({navigation}) => ({
      title: t('repair_history_detail'),
      headerStyle: {
        backgroundColor: '#00420A',
        height: 75,
        elevation: 0,
        shadowOpacity: 0,
      },
      headerTintColor: '#000',
      headerTitleStyle: {
        fontWeight: '400',
        fontSize: 18,
        color: '#fff',
        textAlign: 'left',
        flex: 1,
        fontFamily: 'Prompt-Regular',
        marginLeft: 0,

      },
      headerTitleContainerStyle: {
        alignItems: 'center',
        justifyContent: 'center',
      },
      headerLeftContainerStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        width: '10%',
      },
      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: (
        navigation.state.params.statusRepair !== 'Success' && navigation.state.params.statusRepair !== 'Cancel' && navigation.state.params.type !== 'effect_repair' &&
        <TouchableOpacity onPress={() => navigation.state.params.cancelRepair()} style={{marginRight: 15}}>
          <Text style={{color: '#FF3B30', fontSize: 18}}>{t('cancel')}</Text>
        </TouchableOpacity>
      )
    })
  },
  //Reward
  Reward: screenConfig(RewardScreen, 'redeem_reward'),
  RewardDetailScreen: screenConfig(RewardDetailScreen, 'product_detail'),
  //Redeem
  Redeem: screenConfig(RedeemScreen, 'reward'),
  HistoryRedeem: screenConfig(HistoryRedeem, 'history_point'),
  AllRewards: screenConfig(AllRewards, 'all_reward'),
  MyRewards: screenConfig(MyRewards, 'my_reward'),
  RewardDetail: screenConfig(RewardDetail, 'all_reward'),
  ScanCoupon: {
    screen: ScanCoupon,
    navigationOptions: ({navigation}) => ({
      title: t('coupon'),
      ...defaultHeaderStyle(),
      headerLeft: () => {
        console.log('navigation state', navigation.state)
        return HeaderLeftComponent(navigation, 'MyRewards', {index: navigation.state.params.index})
      }
    })
  },
  RewardTermCondition: screenConfig(RewardTermCondition, 'term_condition'),
  MembershipLevelDetail: screenConfig(MembershipLevelDetail, 'membership_detail'),
  MemberPoinExpire: screenConfig(MemberPoinExpire, 'membership_detail'),
  //Terms and Condition
  Terms: {
    screen: TermsAndCondition,
    navigationOptions: ({navigation}) => ({
      title: t('term_condition'),
      headerStyle: {
        backgroundColor: '#00420A',
        height: 75,
        elevation: 0,
        shadowOpacity: 0,
      },
      headerTintColor: '#000',
      headerTitleStyle: {
        fontWeight: '400',
        fontSize: 18,
        color: '#fff',
        textAlign: 'left',
        flex: 1,
        fontFamily: 'Prompt-Regular',
        marginLeft: 0,

      },
      headerTitleContainerStyle: {
        alignItems: 'center',
        justifyContent: 'center',
      },
      headerLeftContainerStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        width: '10%',
      },
      headerTitleAllowFontScaling: false,

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

const styles = StyleSheet.create({
  textBottomTab: {
    fontSize: 12,
    textAlign: 'center',
  },
  defaultHeaderStyle: {
    backgroundColor: '#00420A',
    height: 75,
    marginTop: 0,
    elevation: 0,
    shadowOpacity: 0,
  },
  defaultHeaderTitleStyle: {
    fontWeight: '400',
    fontSize: 18,
    color: '#fff',
    textAlign: 'left',
    flex: 1,
    fontFamily: 'Prompt-Regular',
    marginLeft: 0,

  },
  defaultHeaderTitleContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  defaultHeaderLeftContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '10%',
  },
})

export default AppStack