import React, { Component } from 'react';
import {
  Image,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  View,
} from 'react-native';
import { Divider } from 'react-native-elements';
import { ApplicationStatus, Offer } from '../../models';
import { ApplicationStatusBar, DistanceIndicator, RelativeTimestamp } from '../common/';
import { Button, Card } from '../ui';

interface Props {
  offer: Offer;
  status?: ApplicationStatus;
  loading?: boolean;
  onOfferDetailsRequested?: (offer: Offer) => void;
  onApplicationRequested?: (offer: Offer) => void;
  footer?: JSX.Element;
}

export class EmployeeOfferListItem extends Component<Props, {}> {

  onSelected = () => this.props.onOfferDetailsRequested(this.props.offer);

  renderButton() {
    const { loading, offer, onApplicationRequested } = this.props;
    const title = loading ? '' : 'Aplikuj';
    return (
      <Button
        loading={loading}
        disabled={loading}
        containerViewStyle={styles.buttonContainer}
        buttonStyle={styles.button}
        title={title}
        onPress={() => onApplicationRequested(offer)}
      />
    );
  }

  renderLocation() {
    const offer = this.props.offer;
    return (
      <View style={{ marginTop: 8 }}>
        <Text style={styles.smallText}>
          {offer.location.name}
        </Text>
        <Text style={styles.smallText}>
          {offer.location.address}
        </Text>
      </View>
    );
  }

  renderFooter() {
    return (
      <View>
        <Divider style={styles.divider} />
        {this.props.footer}
      </View>
    );
  }

  renderHeader() {
    const offer = this.props.offer;
    return (
      <View style={styles.header}>
        <View style={{ flex: 3 }}>
          <RelativeTimestamp
            timestamp={offer.dateEnd}
            style={styles.smallText}
            prefix={{
              past: 'Oferta wygasła',
              future: 'Oferta wygasa',
            }}
          />
          {!!offer.distance && <DistanceIndicator distance={offer.distance} style={{ marginTop: 4 }} />}
          {!!offer.location && this.renderLocation()}
          <Text style={styles.smallText}>Dodane przez {offer.ownerName}</Text>
        </View>
        <View style={{ flex: 1 }}>
          <Image source={{ uri: offer.image }} style={styles.image} />
        </View>
      </View>
    );
  }

  renderContent() {
    return (
      <View style={{ flex: 1 }}>
        <Text numberOfLines={3}>
          {this.props.offer.description}
        </Text>
      </View>
    );
  }

  renderDeleted() {
    return (
      <View>
        <Text>
          Oferta została usunięta
        </Text>
      </View>
    );
  }

  render() {
    const { offer: { title, deleted}, status, footer } = this.props;
    return (
      <Card style={{ padding: 0 }}>
        <TouchableNativeFeedback onPress={this.onSelected} disabled={deleted}>
          <View style={{ padding: 12 }}>
            <Text style={styles.title}>{title}</Text>
            {deleted && this.renderDeleted()}
            {!deleted && this.renderHeader()}
            {!deleted && this.renderContent()}
            {!deleted && !status && this.renderButton()}
            {!deleted && !!footer && this.renderFooter()}
          </View>
        </TouchableNativeFeedback>
        <ApplicationStatusBar status={status} />
      </Card>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  header: {
    flex: 1,
    marginBottom: 4,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  smallText: {
    fontSize: 11,
  },
  title: {
    fontWeight: 'bold',
    fontSize: 14,
    marginVertical: 8,
  },
  button: {
    margin: 0,
  },
  image: {
    marginLeft: 4,
    height: 72,
    width: 72,
    borderRadius: 2,
  },
  data: {
    marginVertical: 2,
  },
  divider: {
    marginVertical: 8,
  },
  buttonContainer: {
    marginTop: 8,
    marginLeft: 0,
    marginRight: 0,
  },
});
