import React, { Component } from 'react';
import {
  ActivityIndicator,
  StyleSheet,
  View,
} from 'react-native';
import { Icon } from 'react-native-elements';
import { NavigationScreenProps } from 'react-navigation';
import { connect, Dispatch } from 'react-redux';
import { ChatActions } from '../../actions';
import { RootState, UserBody } from '../../models';
import { EmployeeDetails } from '../employee/EmployeeDetails';
import { Colors, Header } from '../ui';

interface OwnProps extends NavigationScreenProps<{ employeeId: string }> {

}

interface StateProps {
  user?: UserBody;
}

interface State {

}

interface DispatchProps {
  onChatRequested: (employerId: string, employeeName: string) => void;
}

type Props = StateProps & OwnProps & DispatchProps;

class EmployeeProfileDetailsComponent extends Component<Props, State> {

  renderButton() {
    return (
      <View style={styles.chatButton}>
        <Icon
          raised={true}
          color={'white'}
          name='chat'
          containerStyle={{ backgroundColor: Colors.employer.primary }}
          onPress={() => this.props.onChatRequested(this.props.user.id, this.props.user.name)}
        />
      </View>
    );
  }

  render() {
    const { user } = this.props;
    return (
      <View style={styles.container}>
        <Header title={user && user.name || 'Profil'} />
        {
          this.props.user
            ? <EmployeeDetails
              user={this.props.user}
              footer={this.renderButton()}
            />
            : <ActivityIndicator />
        }
      </View>
    );
  }
}

const mapStateToProps: (state: RootState, ownProps: OwnProps) => StateProps =
  (state, ownProps) => ({
    user: state.employerData.employees[ownProps.navigation.state.params.employeeId],
  });

const mapDispatchToProps: (dispatch: Dispatch<RootState>) => DispatchProps =
  (dispatch) => ({
    onChatRequested: (employerId, employeeName) => dispatch(ChatActions.openChatRoomRequest(employerId, employeeName)),
  });

export const EmployeeProfileDetails = connect(mapStateToProps, mapDispatchToProps)(EmployeeProfileDetailsComponent);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  chatButton: {
    position: 'absolute',
    bottom: 50,
    right: 16,
  },
  button: {
    marginLeft: 0,
    marginRight: 0,
  },
});
