import React, { Component } from 'react';
import {
  FlatList,
  LayoutAnimation,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { NavigationActions } from 'react-navigation';
import { connect, Dispatch } from 'react-redux';
import { Application, Offer, RootState } from '../../models';
import { Routes } from '../../navigation';
import { EmptyView } from '../common';

import { EmployeeOfferListItem } from './EmployeeOfferListItem';

interface OwnProps {
}
interface StateProps {
  loading: boolean;
  applications: Array<Application>;
}
interface DispatchProps {
  onOfferDetailsRequested: (offer: Offer) => void;
}

type Props = OwnProps & StateProps & DispatchProps;

class ApplicationListComponent extends Component<Props, {}> {

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
  }

  renderItemFooter(item: Application) {
    return (
      <View>
        <Text>
          Status: {item.status}
        </Text>
      </View>
    );
  }

  renderItem = ({ item }: { item: Application }) => (
    <EmployeeOfferListItem
      offer={item.offer}
      status={item && item.status}
      loading={false}
      onApplicationRequested={null}
      onOfferDetailsRequested={this.props.onOfferDetailsRequested}
    />
  )

  renderEmpty() {
    return <EmptyView text={'Tutaj znajdziesz wybrane przez Ciebie oferty'} />;
  }

  render() {
    return this.props.applications.length > 0 && (
      <FlatList
        style={styles.container}
        data={this.props.applications}
        renderItem={this.renderItem}
        keyExtractor={(item) => item.id}
      />
    ) || this.renderEmpty();
  }
}

const mapStateToProps: (state: RootState) => StateProps =
  (state) => ({
    applications: state.employeeData.applications,
    loading: false,
  });

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

export const ApplicationList = connect(mapStateToProps, mapDispatchToProps)(ApplicationListComponent);

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