import React, { Component } from 'react';
import {
  FlatList,
  StyleSheet,
  View,
} from 'react-native';
import { Badge } from 'react-native-elements';
import { NavigationActions } from 'react-navigation';
import { connect, Dispatch } from 'react-redux';
import { ApplicationData, ApplicationStatus, Offer, RootState, UserRole } from '../../models';
import { Routes } from '../../navigation';
import { EmptyView } from '../common';
import { Colors } from '../ui';
import { EmployerOfferListItem } from './EmployerOfferListItem';

interface StateProps {
  loading: boolean;
  role: UserRole;
  offers: Array<Offer>;
  extraData: {
    applications: Array<ApplicationData>;
  };
}
interface DispatchProps {
  onOfferSelected: (offer: Offer) => void;
}

type Props = StateProps & DispatchProps;

class OfferListComponent extends Component<Props, {}> {

  renderItemFooter = (offer: Offer) => {
    const { applications } = this.props.extraData;
    const offerApplications = applications.filter((app) => app.offerId === offer.id);
    const pending = offerApplications.filter((app) => app.status === ApplicationStatus.PENDING);
    const accepted = offerApplications.filter((app) => app.status === ApplicationStatus.ACCEPTED);
    return (
      <View style={{ flexDirection: 'row' }}>
        <Badge
          textStyle={{ fontSize: 11 }}
          value={`Aplikacje: ${offerApplications.length}`}
          containerStyle={{ alignSelf: 'flex-start', backgroundColor: 'gray' }}
        />
        {
          pending.length > 0 && (
            <Badge
              textStyle={{ fontSize: 11 }}
              value={`Oczekujące: ${pending.length}`}
              containerStyle={{ marginLeft: 4, backgroundColor: 'rgb(30,139,255)' }}
            />
          )
        }
        {
          accepted.length > 0 && (
            <Badge
              textStyle={{ fontSize: 11 }}
              value={`Zaakceptowane: ${accepted.length}`}
              containerStyle={{ marginLeft: 4, backgroundColor: Colors.employee.offerAccepted }}
            />
          )
        }
      </View>
    );
  }

  renderItem = ({ item }: { item: Offer })  => {
    return (
      <EmployerOfferListItem
        offer={item}
        onSelected={this.props.onOfferSelected}
        footer={this.renderItemFooter(item)}
      />
    );
  }

  renderEmpty() {
    return <EmptyView text={'Nie masz ofert'} />;
  }

  render() {
    const offers = this.props.offers;
    return offers.length > 0 && (
      <FlatList
        style={styles.container}
        data={this.props.offers.sort((a, b) => b.dateEnd - a.dateEnd)}
        extraData={this.props.extraData}
        renderItem={this.renderItem}
        ListEmptyComponent={this.renderEmpty()}
        keyExtractor={(item) => item.id}
      />
    ) || this.renderEmpty();
  }
}

const mapStateToProps: (state: RootState) => StateProps =
  (state) => ({
    offers: state.offers,
    extraData: {
      applications: state.employerData.applications,
    },
    role: state.user.role,
    loading: false,
  });

const mapDispatchToProps: (dispatch: Dispatch<RootState>) => DispatchProps =
  (dispatch) => ({
    onOfferSelected: (offer: Offer) => dispatch(
      NavigationActions.navigate({
        routeName: Routes.OFFER_DETAILS_EMPLOYER,
        params: {
          offerId: offer.id,
        },
      }),
    ),
  });

export const OfferList = connect(mapStateToProps, mapDispatchToProps)(OfferListComponent);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
