import React from 'react';
import {
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  View,
} from 'react-native';
import { Button, Divider, Icon } from 'react-native-elements';
import { ApplicationData, ApplicationStatus } from '../../models';
import { getOfferStatus } from '../../utils/Formatter';
import { Card } from '../ui';
interface Props {
  applicationData: ApplicationData;
  onEmployeeDetailsRequested: () => void;
  onAccepted: () => void;
  onRejected: () => void;
}

const getStatusColor: (status: string) => string =
  (status) => status === ApplicationStatus.PENDING ?
    'black'
    : status === ApplicationStatus.ACCEPTED
      ? 'green'
      : 'red';

export class EmployerOfferApplication extends React.Component<Props, {}> {

  renderAccepted() {
    return (
      <Button
        borderRadius={7}
        onPress={null}
        disabled={true}
        title={'Zaakceptowano'}
      />
    );
  }

  renderRejected() {
    return (
      <Button
        borderRadius={7}
        onPress={null}
        disabled={true}
        title={'Odrzucono'}
      />
    );
  }

  renderButtonsRow() {
    switch (this.props.applicationData.status) {
      case ApplicationStatus.ACCEPTED:
        return null;
      case ApplicationStatus.REJECTED:
        return null;
      default:
        return (
          <View>
            <Divider />
            <View style={styles.buttonArea}>
              <Button
                title='Akceptuj'
                onPress={this.props.onAccepted}
                backgroundColor={'white'}
                color={'green'}
                containerViewStyle={{ flex: 1 }}
              />
              <Button
                title='Odrzuć'
                onPress={this.props.onRejected}
                backgroundColor={'white'}
                containerViewStyle={{ flex: 1 }}
                color={'red'}
              />
            </View>
          </View>
        );
    }
  }

  render() {
    const { applicationData, onEmployeeDetailsRequested } = this.props;
    const displayName = applicationData.employeeDisplayName || applicationData.employeeId;
    return (
      <Card>
        <TouchableNativeFeedback onPress={onEmployeeDetailsRequested}>
          <View style={styles.employeeData}>
            <View>
              <Text>
                {displayName}
              </Text>
              <Text style={{ color: getStatusColor(applicationData.status) }}>
                {getOfferStatus(applicationData.status)}
              </Text>
            </View>
            <View>
              <Icon
                name='person'
                color='black'
                size={16}
              />
              <Text style={{ fontSize: 11, fontWeight: 'bold' }}>Profil</Text>
            </View>
          </View>
        </TouchableNativeFeedback>
        {this.renderButtonsRow()}
      </Card>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 8,
    padding: 4,
  },
  employeeData: {
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  button: {
    flex: 1,
  },
  buttonArea: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
});
