import React from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import { Header, HeaderProps } from 'react-native-elements';
import { connect } from 'react-redux';
import { RootState, UserRole } from '../../models';
import { BackButton, Colors } from './';

interface StateProps {
  backgroundColor: string;
}

type OwnProps = HeaderProps & {
  title: 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 StyledHeader = connect(mapStateToProps)(({ title, backgroundColor, ...otherProps }: OwnProps & StateProps) => (
  <Header
    backgroundColor={backgroundColor}
    leftComponent={<BackButton />}
    innerContainerStyles={styles.innerContainer}
    outerContainerStyles={styles.outerContainer}
    centerComponent={{ text: title, style: styles.title }}
    {...otherProps}
  />
));
const window = Dimensions.get('window');

const styles = StyleSheet.create({
  title: {
    color: 'white',
    position: 'absolute',
    left: 60,
    right: 60,
    width: window.width - 120,
    textAlign: 'center',
  },
  leftItem: {

  },
  innerContainer: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  outerContainer: {
    height: 56,
    borderBottomWidth: 0,
    padding: 0,
  },
});

export { StyledHeader as Header };
