
import React from 'react';
import { connect } from "react-redux";
import PropTypes from 'prop-types';
import _ from "lodash"
import { withStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import LayoutGrid from "../components/templates/LayoutGrid";
import Grid from "../components/templates/Grid"
import AnswerRow from "../components/organisms/AnswerRow"
import { fetchJobsAnsweredRequest } from '../actions/answer'
import { AnswersSelector } from '../reducers/answers'
import Head from 'next/head'
import Link from 'next/link';

const styles = theme => ({
    root: {
        position: 'relative',
        textAlign: 'center',
        paddingTop: theme.spacing(20),
        justifyContent: 'center',
    },
    container: {
        display: 'flex',
        flexDirection: 'column',
        padding: theme.spacing(0,3),
    },
    profil: {
        display: 'flex',
        flexDirection: 'column',
        padding: theme.spacing(3,3),
        textAlign: 'center',
        backgroundColor: theme.palette.primary.main,
    },
    title: {
      fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
      fontSize: '1.5em',
      fontWeight: '600',
      textAlign: 'center',
      marginTop: theme.spacing(4),
      marginBottom: theme.spacing(3),
      padding: theme.spacing(0, 8),
    },

});

class Candidatures extends React.Component {

    render() {
        const { classes } = this.props;

        return (
            <LayoutGrid backLink="/">
            <Head>
                <title key="title">Candidatures</title>
                <meta name="robots" content="noindex, nofollow"></meta>
            </Head>

                {/* TODO */}
                <Typography component="h1" align="center" className={classes.title} gutterBottom>
                    Mes candidatures
                </Typography>

                <div className={classes.container}>

                    <Grid CustomRowComponent={AnswerRow}
                        dataFetcher={this.props.fetchJobsAnsweredRequest}
                        data={this.props.answers}
                        currentPage={this.props.currentPage}
                        recordCount={this.props.recordCount}
                        loading={this.props.loading}
                        placeholder={"Rechercher une réponse"}
                        searchable={false}
                    />
                </div>


                







            </LayoutGrid>
        );
    }
}

Candidatures.propTypes = {
    classes: PropTypes.object.isRequired,
};

function mapStateToProps(state) {

    return {
        loading:state.answers.loading,
        answers: Object.keys(state.answers).length !== 0 && AnswersSelector(state),
        //answers: state.answers.data,
        currentPage: _.toNumber(!!state.answers.meta && _.ceil((state.answers.meta.offset + 1) / state.answers.meta.limit)),
        recordCount: _.toNumber(!!state.answers.meta && state.answers.meta.total_items)
    };
}

export default withStyles(styles)(connect(mapStateToProps, {fetchJobsAnsweredRequest })(Candidatures))
