import React from 'react';
import {
  StyleSheet,
} from 'react-native';
import { Button, ButtonProps } from 'react-native-elements';
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 StyledButton = connect(mapStateToProps)((props: ButtonProps & StateProps) => (
  <Button
    containerViewStyle={styles.container}
    {...props}
  />
));
export { StyledButton as Button };

const styles = StyleSheet.create({
  container: {
    marginLeft: 0,
    marginRight: 0,
  },
});
