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 { EmployerBody, RootState } from '../../models';
import { EmployerDetails } from '../employer/EmployerDetails';
import { BackButton, Colors, Header } from '../ui';

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

}

interface StateProps {
  employer: EmployerBody;
}

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

interface State {

}

type Props = StateProps & OwnProps & DispatchProps;

class EmployerProfileDetailsComponent extends Component<Props, State> {

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

  render() {
    const { employer } = this.props;
    return (
      <View style={styles.container}>
        <Header
          title={'Profil pracodawcy'}
          leftComponent={<BackButton />}
        />
        {
          employer
            ? <EmployerDetails user={employer} />
            : <ActivityIndicator />
        }
        {this.renderButton()}
      </View>
    );
  }
}

const mapStateToProps: (state: RootState, ownProps: OwnProps) => StateProps =
  (state, ownProps) => ({
    user: state.user.body,
    employer: state.employeeData.employers[ownProps.navigation.state.params.employerId],
  });

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

export const EmployerProfileDetails = connect(mapStateToProps, mapDispatchToProps)(EmployerProfileDetailsComponent);

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