import React, { Fragment } from 'react';
import { connect } from "react-redux";
import PropTypes from 'prop-types';

import _ from "lodash"
import { withStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { TextField, Button, Typography } from '@material-ui/core';
import SwipeableViews from 'react-swipeable-views';
import Snack from '../components/atoms/snack'
import Loader from './../components/templates/loader'
import LayoutCandidature from '../components/templates/LayoutCandidature';
import CandidatureDetail from '../components/organisms/CandidatureDetail'
import OffreDetail from '../components/organisms/OffreDetail'
import Chat from '../components/organisms/Chat'
import AppBar from '@material-ui/core/AppBar';
import { AnswersSelector } from '../reducers/answers'
import { fetchAnswerRequest } from '../actions/answer'
import Head from 'next/head'

const styles = theme => ({
    root: {
        position: 'relative',
        textAlign: 'center',
        paddingTop: theme.spacing(20),
        justifyContent: 'center',
    },
    container: {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
    },
    userDataContainer: {
        display: 'flex',
        padding: theme.spacing(2) + 'px 18vw',

    },
    userTextContainer: {
        display: 'flex',
        flexDirection: 'column',
        paddingLeft: theme.spacing(2),
    },
    AppBar: {
        top: '64px',
        position: 'fixed',
    },
    SwipeableViews: {
        paddingTop: '64px',
    },
    tab: {
        '& span.MuiTab-wrapper': {
            fontSize: '1.1em',
            fontWeight: '300',
            textTransform: 'none',
        }
    },
    title: {
        fontSize: '1em',
        fontWeight: '500',
    },
    titleBorder: {
        '&:after': {
            content: '""',
            width: '15px',
            borderBottom: 'solid 2px',
            borderColor: theme.palette.primary.main + '!important',
            display: 'flex',
        },
    },
    userTextName: {
        fontWeight: '500',
        fontSize: '1em',
    },
    userTextDate: {
        fontWeight: '300',
        fontSize: '0.9em',
    },
    userAvatar: {
        width: '54px',
        height: '54px',
    },
    menuLogo: {
        cursor: 'pointer',
        [theme.breakpoints.down('md')]: {
            width: '200px'
        },
        [theme.breakpoints.down('sm')]: {
            width: '130px'
        },
    },


});

function TabContainer({ children, dir }) {
    return (
        <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
            {children}
        </Typography>
    );
}
class Candidature extends React.Component {
    state = {
        data: {

        },
        errors: {},
        loading: true,
        tabIndex: 0,
        openSnack: false
    }

    static getInitialProps(context) {
        const { id } = context.query
        return { id: id * 1 }
    }

    componentDidMount() {

        this.props.fetchAnswerRequest(this.props.id)
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        this.setState({
            loading: nextProps.answer.loading
        })
    }

    componentWillUnmount() {

    }

    handleChange = (event, newValue) => {
        this.setState({ tabIndex: newValue });
    }

    handleChangeIndex = (index) => {
        this.setState({ tabIndex: index });
    }

    render() {
        const { classes } = this.props;
        const { data, errors, loading, openSnack } = this.state;

        return (
            <LayoutCandidature>
                <Head>
                    <title key="title">Candidature</title>
                    <meta name="robots" content="noindex, nofollow"></meta>
                </Head>
                <Fragment>
                    <div className={classes.container}>
                        {/* {!!errors && (<div className="alert alert-danger">{errors && errors.message}</div> )} */}
                        {loading && (
                            <Loader />
                        )}
                        {!loading && (
                            <Fragment>
                                <AppBar color="default" className={classes.AppBar}>
                                    <Tabs
                                        value={this.state.tabIndex}
                                        onChange={this.handleChange}
                                        indicatorColor="primary"
                                        variant="fullWidth"
                                    >
                                        <Tab label="Candidature" className={classes.tab} />
                                        <Tab label="Messagerie" className={classes.tab} />
                                        <Tab label="Offre d'emploi" className={classes.tab} />
                                    </Tabs>
                                </AppBar>
                                <SwipeableViews
                                    axis={'x'}
                                    index={this.state.tabIndex}
                                    onChangeIndex={() => this.handleChangeIndex()}
                                    className={classes.SwipeableViews}
                                >
                                    <TabContainer dir={'x'}>
                                        <Fragment>
                                            <section className={classes.userDataContainer}>
                                                {this.props.user.picture ?
                                                    <img alt="talents-tube" src={`http://localhost/uploads/img/${this.props.user.picture}`} className={classes.userAvatar} />
                                                    :
                                                    <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={classes.userAvatar} />
                                                }
                                                <div className={classes.userTextContainer}>
                                                    <Typography gutterBottom className={classes.userTextName}>
                                                        {this.props.user.firstname + " " + this.props.user.lastname}
                                                    </Typography>
                                                    <Typography gutterBottom className={classes.userTextDate}>
                                                        Envoyé le  {(new Date(this.props.answer.c_time)).toLocaleDateString("fr-FR")}
                                                    </Typography>
                                                </div>
                                            </section>
                                            {this.props.answer.video && <CandidatureDetail {...this.props.answer} />}
                                        </Fragment>
                                    </TabContainer>
                                    <TabContainer dir={'x'}>
                                        {this.props.answer.messages && <Chat answerId={this.props.answer.id} ></Chat>}
                                    </TabContainer>
                                    <TabContainer dir={'x'}>
                                        {this.props.answer.ad && <OffreDetail isCandidature='true' offre={this.props.answer.ad} />}
                                    </TabContainer>
                                </SwipeableViews>
                            </Fragment>
                        )}
                    </div>
                    <Snack variant="error" message={this.state.errors.message}
                        openSnack={this.state.openSnack} onClose={this.handleClose} />
                </Fragment>
            </LayoutCandidature>
        );
    }
}

function mapStateToProps(state) {
    return {
        answer: state.answer,
        user: state.user
    }
}

Candidature.propTypes = {
    classes: PropTypes.object.isRequired,
    id: PropTypes.number
};


export default withStyles(styles)(connect(mapStateToProps, { fetchAnswerRequest })(Candidature))
