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

interface Props {
  offer: Offer;
  onSelected?: (offer: Offer) => void;
  footer?: JSX.Element;
}

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

  constructor(props: Props) {
    super(props);
    this.onSelected = this.onSelected.bind(this);
  }

  onSelected() {
    this.props.onSelected && this.props.onSelected(this.props.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>
    );
  }

  render() {
    const { offer, onSelected } = this.props;
    return (
      <Card style={{ padding: 0 }}>
        <TouchableNativeFeedback
          onPress={() => onSelected(offer)}
          background={TouchableNativeFeedback.SelectableBackground()}
        >
          <View style={{ padding: 12 }}>
            <Text style={styles.title}>{offer.title}</Text>
            <View style={styles.header}>
              <View style={{ flex: 3 }}>
                <RelativeTimestamp
                  timestamp={offer.dateEnd}
                  style={styles.smallText}
                  prefix={{
                    past: 'Oferta wygasła',
                    future: 'Oferta wygasa',
                  }}
                />
                <Text style={styles.smallText}>Ilość miejsc: {offer.freeSlots}{'/'}{offer.slots}</Text>
                {offer.location && this.renderLocation()}
              </View>
              <View style={{ flex: 1 }}>
                <Image source={{ uri: offer.image }} style={styles.image} />
              </View>
            </View>
            <View style={{ flex: 1 }}>
              <Text numberOfLines={3}>
                {offer.description}
              </Text>
            </View>
            {!!this.props.footer && this.renderFooter()}
          </View>
        </TouchableNativeFeedback>
      </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: 16,
    paddingVertical: 4,
  },
  data: {
    marginVertical: 2,
  },
  image: {
    marginLeft: 4,
    height: 72,
    width: 72,
  },
  button: {
    margin: 0,
  },
  divider: {
    marginVertical: 8,
  },
  buttonContainer: {
    marginTop: 8,
    marginLeft: 0,
    marginRight: 0,
  },
});
