import React from 'react';
import { StatusBar } from 'react-native';
import { connect } from 'react-redux';
import { RootState, UserRole } from '../../models';
import { Colors } from './';

interface StateProps {
  backgroundColor: string;
}

const mapStateToProps: (state: RootState) => StateProps =
  (state) => {
    const user = state.user;
    const backgroundColor = user.body ?
      (
        user.role === UserRole.EMPLOYEE
          ? Colors.employee.primary
          : Colors.employer.primary
      )
      : Colors.default.primary;
    return { backgroundColor };
  };

const StyledBar = connect(mapStateToProps)(({ backgroundColor }: StateProps) => (
  <StatusBar backgroundColor={backgroundColor} />
));

export { StyledBar as StatusBar };
