import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
// import AccountStep from "../../components/organisms/AccountStep";
import AccountEtape1 from '../organisms/AccountEtape1';
import AccountEtape2 from '../organisms/AccountEtape2';
import AccountEtape3 from '../organisms/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 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)
    }
}));

function getSteps() {
    return ['Informations personnelles', 'Vidéo de présentation', 'Expériences professionnelles'];
}

function getStepContent(step) {
    switch (step) {
        case 0:
            return <AccountEtape1 ></AccountEtape1>;
        case 1:
            return <AccountEtape2></AccountEtape2>;
        case 2:
            return <AccountEtape3></AccountEtape3>;
        default:
            return 'Unknown step';
    }
}

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()
    const [activeStep,
        setActiveStep] = React.useState(0);
    const [completed,
        setCompleted] = React.useState(new Set());
    const [skipped,
        setSkipped] = React.useState(new Set());
    const [state,
        setState] = React.useState({checkedA: true, checkedB: true});
    const steps = getSteps();

    const totalSteps = () => {
        return getSteps().length;
    };

    const isStepOptional = (step) => {
        return step === 4;
    };

    const handleSkip = () => {
        if (!isStepOptional(activeStep)) {
            // You probably want to guard against something like this it should never occur
            // unless someone's actively trying to break something.
            throw new Error("You can't skip a step that isn't optional.");
        }

        setActiveStep((prevActiveStep) => prevActiveStep + 1);
        setSkipped((prevSkipped) => {
            const newSkipped = new Set(prevSkipped.values());
            newSkipped.add(activeStep);
            return newSkipped;
        });
    };

    const skippedSteps = () => {
        return skipped.size;
    };

    const completedSteps = () => {
        return completed.size;
    };

    const allStepsCompleted = () => {
        return completedSteps() === totalSteps() - skippedSteps();
    };

    const isLastStep = () => {
        return activeStep === totalSteps() - 1;
    };

    const handleNext = () => {
        const newActiveStep = isLastStep() && !allStepsCompleted()
            ? // It's the last step, but not all steps have been completed
            // find the first step that has been completed
            steps.findIndex((step, i) => !completed.has(i))
            : activeStep + 1;

        setActiveStep(newActiveStep);
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const handleStep = (step) => () => {
        console.log("step");
        console.log(step);
        setActiveStep(step);
    };

    const handleComplete = () => {
        const newCompleted = new Set(completed);
        newCompleted.add(activeStep);
        setCompleted(newCompleted);

        /**
     * Sigh... it would be much nicer to replace the following if conditional with
     * `if (!this.allStepsComplete())` however state is not set when we do this,
     * thus we have to resort to not being very DRY.
     */
        if (completed.size !== totalSteps() - skippedSteps()) {
            handleNext();
        }
    };

    const handleReset = () => {
        setActiveStep(0);
        setCompleted(new Set());
        setSkipped(new Set());
    };

    const isStepSkipped = (step) => {
        return skipped.has(step);
    };

    const handleChange = (event) => {
        setState({
            ...state,
            [event.target.name]: event.target.checked
        });
    };

    function isStepComplete(step) {
        return completed.has(step);
    }
    function refresh() {
        document
            .location
            .reload(true);
        console.log("refresh")
    }

    return (
        <Grid
            container
            spacing={4}
            direction="row"
            justify="space-between"
            alignItems="flex-start">
            <Grid item lg={3} md={6} xl={4} xs={12}>
                <Card {...rest} className={clsx(classes.root, className)}>
                    <CardContent>
                        <div id="fb-root"></div>
                        <script
                            async
                            defer
                            crossorigin="anonymous"
                            src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v8.0&appId=2332071840142634&autoLogAppEvents=1"
                            nonce="O28M4TTm"></script>
                        <div className={classes.details}>
                            <div>
                                <Typography gutterBottom variant="h5">
                                    {user.lastname}
                                    &nbsp; {user.firstname}
                                    <a href="#" onClick={refresh}><RefreshIcon className={classes.menuButton}/></a>
                                </Typography>
                                <Typography
                                    className={classes.locationText}
                                    color="textSecondary"
                                    variant="body1">
                                    <MailIcon className={classes.menuButton}/>
                                    : {user.email}<br/>
                                    <PhoneIcon className={classes.menuButton}/>
                                    : {user.phone}<br/>
                                    <LinkedInIcon className={classes.menuButton}/>
                                    : {(user.linkedin && user.linkedin != '' && user.linkedin != 'null')
                                        ? <a href={user.linkedin} target="_blank">Lien sur mon linkedIn</a>
                                        : 'Non renseigné'}<br/>
                                    <PublicIcon className={classes.menuButton}/>
                                    : {(user.website && user.website != '' && user.website != 'null')
                                        ? <a href={user.website} target="_blank">Lien sur mon site</a>
                                        : 'Non renseigné'}<br/>
                                    
                                    
                                    
                                </Typography>
                                
                            </div>
                            {/* <Avatar
                                className={classes.avatar}
                                src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl}/> */}
                        </div>
                        <div>
                        <Box m={3}/>
                        <Divider/>
                        <Box m={3}/>
                        <Typography
                                    className={classes.locationText}
                                    color="textSecondary"
                                    variant="body1">
                                    
                                    <DuoIcon className={classes.menuButton}/>
                                    : {(user.alias && user.alias != '' && user.alias != 'null')
                                        ? <a
                                                href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
                                                target="_blank">Voir mon profil TalentsTube
                                            </a>
                                        : 'Non renseigné'}<br/>
                                    <div
                                        class="fb-share-button"
                                        data-href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
                                        data-layout="button_count"
                                        data-size="small">

                                        <Facebook className={classes.menuButton}/>
                                        :
                                        <a
                                            target="_blank"
                                            href={"https://www.facebook.com/sharer/sharer.php?u=" + publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias + "%2F&amp;src=sdkpreparse"}
                                            class="fb-xfbml-parse-ignore"> Partager mon profil
                                        </a>
                                    </div>
                                </Typography>
                        </div>
                        {/* <div className={classes.progress}>
                            <Typography variant="body1">Etat du Profil: 70%</Typography>
                            <LinearProgress value={70} variant="determinate"/>
                        </div> */}

                    </CardContent>
                    <Box m={2}/>
                    <Divider/>
                    <Box m={2}/>
                    <div className={classes.information}>
                        <Typography className={classes.texteBlanc} align="left"></Typography>
                    </div>
                    {/* <CardActions>
                        <Button className={classes.uploadButton} color="primary" variant="text">
                            Remplacer une photo de profil
                        </Button>
                        <Button variant="text">Supprimer photo de profil</Button>
                    </CardActions> */}
                    <Box m={1}/>
                    <Divider/>
                     {/* <CardContent>
                        <Typography variant="body1"></Typography>
                        <FormControlLabel
                            value="end"
                            control={< Switch checked = {
                            state.checkedA
                        }
                        onChange = {
                            handleChange
                        }
                        name = "checkedA" color = "primary" />}
                            label="Je souhaite afficher mon profil sur la CV Vidéothèque Talents Tube"
                            labelPlacement="start"/>

                    </CardContent> */}

                    

                    <CardActions>

                        <Stepper nonLinear activeStep={activeStep} orientation="vertical">
                            {steps.map((label, index) => {
                                const stepProps = {};
                                const buttonProps = {};
                                if (isStepOptional(index)) {
                                    buttonProps.optional = <Typography variant="caption">Optional</Typography>;
                                }
                                if (isStepSkipped(index)) {
                                    stepProps.completed = false;
                                }
                                return (
                                    <Step key={label} className={classes.actionsContainer} {...stepProps}>
                                        <StepButton
                                            onClick={handleStep(index)}
                                            completed={isStepComplete(index)}
                                            {...buttonProps}>
                                            {label}
                                        </StepButton>

                                    </Step>
                                );
                            })}
                        </Stepper>
                    </CardActions>
                    <Divider/>

                    <div>

                        <div>

                            <div>

                                {/* {isStepOptional(activeStep) && !completed.has(activeStep) && (
                    <Button
                      variant="contained"
                      color="primary"
                      onClick={handleSkip}
                      className={classes.button}
                    >
                      Skip
                    </Button>
                  )} */}

                                {/* {activeStep !== steps.length &&
                    (completed.has(activeStep) ? (
                      <Typography variant="caption" className={classes.completed}>
                        Step {activeStep + 1} already completed
                      </Typography>
                    ) : (
                      <Button variant="contained" color="primary" onClick={handleComplete}>
                        {completedSteps() === totalSteps() - 1 ? 'Finish' : 'Complete Step'}
                      </Button>
                    ))} */}
                            </div>
                        </div>

                    </div>
                    <Box m={2}/>
                <CardContent>
                    <BottomNavigation className={classes.stickToBottom}>
                        <Button
                            disabled={activeStep === 0}
                            onClick={handleBack}
                            className={classes.button}>
                            Etape précédente
                        </Button>
                        <Button
                            variant="contained"
                            color="primary"
                            onClick={handleNext}
                            className={classes.button}>
                            Etape suivante
                        </Button>
                        {/* <BottomNavigationAction label="Recents" icon={< RestoreIcon />}/>
                      <BottomNavigationAction label="Favorites" icon={< FavoriteIcon />}/>
                      <BottomNavigationAction label="Nearby" icon={< LocationOnIcon />}/> */}
                    </BottomNavigation>
                </CardContent>
                </Card>
                
            </Grid>
            <Grid item lg={9} md={6} xl={8} xs={12}>
                {getStepContent(activeStep)}
            </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))