import React, { Component } from 'react';
import {
  LayoutAnimation,
  StyleSheet,
  View,
} from 'react-native';
import { NavigationActions } from 'react-navigation';
import { connect, Dispatch } from 'react-redux';
import { OfferList } from '../../components/employer/EmployerOfferList';
import { Button } from '../../components/ui/Button';
import { RootState } from '../../models';
import { Routes } from '../../navigation';
import { RenderErrorView } from '../RenderError';

interface Props {
  createNewOffer: () => void;
}

interface State {
  error: boolean;
}

class EmployerJobsComponent extends Component<Props, State> {

  state = { error: false };

  componentDidCatch() {
    this.setState({ error: true });
  }

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
  }

  render() {
    if (this.state.error) return <RenderErrorView />;
    return (
      <View style={styles.container}>
        <OfferList />
        <Button
          buttonStyle={{ height: 50 }}
          containerViewStyle={styles.button}
          raised
          title='Dodaj nową ofertę'
          onPress={() => this.props.createNewOffer()}
        />
      </View>
    );
  }
}
const mapDispatchToProps: (dispatch: Dispatch<RootState>) => Props =
  (dispatch) => ({
    createNewOffer: () => dispatch(NavigationActions.navigate({ routeName: Routes.EDIT_OFFER })),
  });
export const EmployerJobs = connect(null, mapDispatchToProps)(EmployerJobsComponent);

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