import React, {Fragment} from 'react';
import {Hidden} from '@material-ui/core';
import PropTypes from 'prop-types';
import clsx from 'clsx';
// import AccountStep from "../../components/organisms/AccountStep";
import AccountEtape1 from './AccountEtape1';
import AccountEtape2 from './AccountEtape2';
import AccountEtape3 from './AccountEtape3';
import {withStyles} from '@material-ui/core/styles';
// import Switch from '@material-ui/core/Switch';
import PhoneIcon from '@material-ui/icons/Phone';
import MailIcon from '@material-ui/icons/Mail';
import PublicIcon from '@material-ui/icons/Public';
import DuoIcon from '@material-ui/icons/Duo';
import LinkedInIcon from '@material-ui/icons/LinkedIn';
import Facebook from '@material-ui/icons/Facebook';
// import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel
// from '@material-ui/core/FormControlLabel'; import FormControl from
// '@material-ui/core/FormControl';
import {updateUserRequest, updateUserPictureRequest} from '../../actions/user'
import {makeStyles} from '@material-ui/styles';
import {connect} from 'react-redux'
import getConfig from 'next/config'
import Router from 'next/router'

import BottomNavigation from '@material-ui/core/BottomNavigation';
// import BottomNavigationAction from
// '@material-ui/core/BottomNavigationAction';
import RefreshIcon from '@material-ui/icons/Refresh';
// import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
// from '@material-ui/icons/LocationOn';

import Box from '@material-ui/core/Box';

import {
    Card,
    CardActions,
    CardContent,
    Avatar,
    Typography,
    Divider,
    Button,
    LinearProgress,
    Stepper,
    Step,
    StepLabel,
    StepContent,
    StepButton,
    Paper,
    Grid
} from '@material-ui/core';

const styles = theme => ({
    container: {
        width: '100%'
    },
    button: {
        textTransform: 'inherit',
        marginLeft: theme.spacing(8),
        marginRight: theme.spacing(8),
        padding: theme.spacing(1.2, 2),
        color: theme.palette.secondary.main,
        backgroundColor: theme.palette.primary.important
    },
    stickToBottom: {
        width: '100%',
        position: 'fixed',
        bottom: 0
    }
});

const useStyles = makeStyles(theme => ({
    root: {},
    details: {
        display: 'flex'
    },
    avatar: {
        marginLeft: 'auto',
        height: 110,
        width: 100,
        flexShrink: 0,
        flexGrow: 0
    },
    progress: {
        marginTop: theme.spacing(2)
    },
    information: {
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: theme.palette.primary.main,
        [
            theme
                .breakpoints
                .up('md')
        ]: {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'flex-start',
            justifyContent: 'space-around',
            backgroundColor: theme.palette.primary.main,
            padding: theme.spacing(7, 7)
        },
        '& a': {
            textDecoration: 'none'
        }
    },
    texteBlanc: {
        color: "#fff"
    },
    uploadButton: {
        marginRight: theme.spacing(2)
    },
    button: {
        marginTop: theme.spacing(1),
        marginRight: theme.spacing(1)
    },
    actionsContainer: {
        marginBottom: theme.spacing(2)
    },
    resetContainer: {
        padding: theme.spacing(3)
    }
}));

const AccountProfile = props => {
    const {
        className,
        user,
        ...rest
    } = props;
    const logoUrl = user.picture;
    const classes = useStyles();

    // const user = {   name: 'Laurent Laniau',   city: 'Questembert',   country:
    // 'France',   timezone: '',   avatar: '/images/avatars/avatar_11.png' };
    const {publicRuntimeConfig} = getConfig()

    return (
        <Grid
            container
            spacing={4}
            direction="row"
            justify="space-between"
            alignItems="flex-start">
            
            <Grid item lg={9} md={6} xl={8} xs={12}>
                <Fragment>
                    <Hidden>&nbsp;</Hidden>
                    <Hidden>&nbsp;</Hidden>

                    <Card
                        variant="outlined"
                        style={{
                        width: 420 + "px",
                        textAlign:"center"
                    }}>
                        <CardActions></CardActions>
                        <CardContent>
                            <Typography>
                                Tu n'as pas tout dit dans ta vidéo?<br/>
                                Pour mettre toutes les chances de ton côté, 
                                <b> dépose ton CV old school (format pdf, word)!</b>
                            </Typography>
                        </CardContent>

                    </Card>
                    <Hidden>&nbsp;</Hidden>
                    <Card
                        variant="outlined"
                        style={{
                        width: 420 + "px",
                        textAlign:"center"
                    }}>
                        <CardContent>
                            <AccountEtape3></AccountEtape3>
                        </CardContent>
                    </Card>
                    <Hidden>&nbsp;</Hidden>
                    <Hidden>&nbsp;</Hidden>
                    <Card
                        variant="outlined"
                        style={{
                        width: 420 + "px",
                        textAlign:"center"
                    }}>
                        <CardContent>
                            
                            <Button
                                variant="contained"
                                color="primary"
                                onClick={() => Router.push(`/Candidatures`)}
                                className={classes.button}>
                                Voir mes candidatures
                            </Button>
                        </CardContent>
                    </Card>
                </Fragment>

            </Grid>
            <Grid item lg={3} md={6} xl={4} xs={12}></Grid>

        </Grid>

    );
};

AccountProfile.propTypes = {
    className: PropTypes.string
};
function mapStateToProps(state, ownProps) {
    return {
        user: state.user,
        loading: !!state.user.loading,
        errors: state.user.errors || ownProps.errors
    };
}

export default withStyles(styles)(connect(mapStateToProps, {updateUserRequest})(AccountProfile))