import React from 'react';
import { BackHandler } from 'react-native';
import {
  addNavigationHelpers,
  NavigationActions,
  NavigationState,
  StackNavigator,
} from 'react-navigation';
import { connect } from 'react-redux';
import {
  EmployeeOfferDetails,
  EmployeeProfileEdit,
  EmployerProfileDetails,
} from '../components/employee';
import {
  EmployeeProfileDetails,
  EmployerOfferDetails,
  EmployerProfileEdit,
} from '../components/employer';
import { EditOffer } from '../components/employer/EditOffer';
import { StatusBar } from '../components/ui';
import { RootState } from '../models';
import { ChatRoom } from '../scenes/ChatRoom';
import { MainEmployee } from '../scenes/employee/Main';
import { MainEmployer } from '../scenes/employer/Main';
import { LoginScreen } from '../scenes/LoginScreen';
import { SplashScreen } from '../scenes/SplashScreen';
import { UnSupported } from '../scenes/UnSupported';

export const Routes = {
  SPLASH: 'SPLASH',
  LOGIN: 'LOGIN',
  CHATROOM: 'CHATROOM',
  APP_EMPLOYER: 'APP_EMPLOYER',
  APP_EMPLOYEE: 'APP_EMPLOYEE',
  EMPLOYER_PROFILE: 'EMPLOYER_PROFILE',
  EMPLOYER_PROFILE_EDIT: 'EMPLOYER_PROFILE_EDIT',
  EMPLOYER_PROFILE_DETAILS: 'EMPLOYER_PROFILE_DETAILS',
  EMPLOYEE_PROFILE_DETAILS: 'EMPLOYEE_PROFILE_DETAILS',
  EMPLOYEE_PROFILE_EDIT: 'EMPLOYEE_PROFILE_EDIT',
  NEW_OFFER: 'NEW_OFFER',
  EDIT_OFFER: 'EDIT_OFFER',
  OFFER_DETAILS_EMPLOYER: 'OFFER_DETAILS_EMPLOYER',
  OFFER_DETAILS_EMPLOYEE: 'OFFER_DETAILS_EMPLOYEE',
  VERSION_UNSUPPORTED: 'VERSION_UNSUPPORTED',
};

interface StateProps {
  navigation: NavigationState;
}

interface DispatchProps {
  dispatch: any;
}

interface Props extends StateProps, DispatchProps { }

export const RootNavigator = StackNavigator({
  [Routes.APP_EMPLOYER]: {
    screen: MainEmployer,
  },
  [Routes.APP_EMPLOYEE]: {
    screen: MainEmployee,
  },
  [Routes.EMPLOYER_PROFILE_EDIT]: {
    screen: EmployerProfileEdit,
  },
  [Routes.EMPLOYEE_PROFILE_DETAILS]: {
    screen: EmployeeProfileDetails,
  },
  [Routes.EMPLOYER_PROFILE_DETAILS]: {
    screen: EmployerProfileDetails,
  },
  [Routes.EMPLOYEE_PROFILE_EDIT]: {
    screen: EmployeeProfileEdit,
  },
  [Routes.EDIT_OFFER]: {
    screen: EditOffer,
  },
  [Routes.OFFER_DETAILS_EMPLOYEE]: {
    screen: EmployeeOfferDetails,
  },
  [Routes.OFFER_DETAILS_EMPLOYER]: {
    screen: EmployerOfferDetails,
  },
  [Routes.LOGIN]: {
    screen: LoginScreen,
  },
  [Routes.CHATROOM]: {
    screen: ChatRoom,
  },
  [Routes.SPLASH]: {
    screen: SplashScreen,
  },
  [Routes.VERSION_UNSUPPORTED]: {
    screen: UnSupported,
  },
}, {
    navigationOptions: {
      header: <StatusBar />,
    },
  });

class NavRootComponent extends React.Component<Props, {}> {
  constructor(props: Props) {
    super(props);
    this.onBackPressed = this.onBackPressed.bind(this);
  }

  componentDidMount(): void {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPressed);
  }

  componentWillUnmount(): void {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPressed);
  }

  onBackPressed(): boolean {
    if (this.shouldCloseApp()) {
      return false;
    }
    this.props.dispatch(NavigationActions.back({}));
    return true;
  }

  shouldCloseApp(): boolean {
    const navigation = this.props.navigation;
    return navigation.index === 0;
  }

  render() {
    return (
      <RootNavigator
        navigation={addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.navigation,
        })}
      />
    );
  }
}

const mapStateToProps = (state: RootState): StateProps => {
  return {
    navigation: state.navigation,
  };
};

export default connect(mapStateToProps)(NavRootComponent as any);
