import React, { Component, Fragment, useState } from 'react'
import { withStyles } from '@material-ui/core/styles';
import { Button, Typography, Divider, Hidden } from '@material-ui/core';
import TextField from '@material-ui/core/TextField';
import Input from '@material-ui/core/Input';
import { connect } from 'react-redux'
import { postAdAnswerRequest } from '../../actions/answer'
import { updateUserRequest, updateUserPictureRequest } from '../../actions/user'
import Avatar from '@material-ui/core/Avatar';
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
import Loader from './../templates/loader'
import getConfig from 'next/config'
import 'video-react/dist/video-react.css';
import { Player } from 'video-react';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import GooglePlaceAutocomplete from 'mui-places-autocomplete'
import { geocodeByAddress } from 'react-places-autocomplete'
import FormControl from '@material-ui/core/FormControl'
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import { uploadMediaCv } from '../../actions/mediaCv'
import GetApp from '@material-ui/icons/GetApp';
// import PlacesAutocomplete from 'react-places-autocomplete';
// import {
//     geocodeByAddress,
//     geocodeByPlaceId,
//     getLatLng,
//   } from 'react-places-autocomplete';
// import GoogleAutoComplete from 'react-google-autocomplete-address-fields';



const styles = theme => ({
    container: {
        width: '100%',
    },
    form: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '24px',
        paddingBottom: theme.spacing(8),
        marginBottom: theme.spacing(8),
        '&>div': {
            marginTop: theme.spacing(1.5),
            marginBottom: theme.spacing(1.5),
        },
        [theme.breakpoints.up('md')]: {
            padding: '0 calc(25vw + 24px)',
        },

    },
    importContainer: {
        alignSelf: 'flex-start',
    },
    textField: {
        width: '100%',
        '&:disabled': {
            color: theme.palette.secondary.dark,
        },
        '& label': {
            color: theme.palette.primary.dark,
        },
        '& fieldset:hover': {
            borderColor: theme.palette.primary.main + ' !important',
        },
    },
    foot: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: '10',
        width: '100%',
        position: 'fixed',
        bottom: 0,
        padding: theme.spacing(1.2, 0),
        backgroundColor: theme.palette.secondary.main,
        boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
    },
    rootButton: {
        textTransform: 'inherit',
        
    },
    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,
    },
    containerImport:{
        width:"100%",
        textAlign:"left",
        align:"left",
        alignItems:"flex-start",
        border: 0,
        margin: 0,
        display: "inline-flex",
        padding: 0,
        position: "relative",
        flexDirection: "column",
        verticalAlign: "top",
        marginBottom:"20px !important"
    },
    importButton: {
        padding: '4px 8px',
        textTransform: 'inherit',
        border: '2px solid #1E2327',
        color: '#1E2327',
    },
    remplacerButton: {
        color: '#1E2327',
        borderColor: '#1E2327',
        border: '2px solid',
        padding: '9.6px 8px',
        margin:'15px 0px 25px 0px',
        textTransform: 'inherit',
    },
    popup: {
        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
        fontWeight: '400',
        color: '#8E9092'
    },
    player:{
        width:"100px"
    },
    labelGeoloc:{
        paddingLeft:"14px",
        fontSize: "0.8rem",
        color:"#1E2327",
        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
        fontWeight: "400",
        lineHeight: "1",
        letterSpacing: "0.00938em",    }
    ,conteneurGoogle:{
        border:"1px solid rgb(200, 200, 200)",
        borderRadius :"5px",
        padding:"5px 0px",
        

    },
    conteneurGoogleComposant:{
        paddingLeft:"14px"
    }
    
});
export const getCountryFromAddress = (address) => {
    if (!address) {
        return '';
    }
    try {
        const country = address.address_components.filter(component => component.types.includes('country')).map(c => c.long_name)[0];
        console.log('using country for filter ' + country);
        return country;
    } catch (error) {
        console.log(error);
        return '';
    }
}
const { publicRuntimeConfig } = getConfig()

//https://xd.adobe.com/view/ba98331a-9145-4d67-7e27-25a36e519ef4-cca9/screen/a96779d7-bdb3-410a-8f19-e6987acb98ee/Candidature-Step-3
class Answer extends Component {
    
    constructor(props) {
        super(props);

        
        const viewValue = this.props.value;
        
        this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
        this.onChange = this.onChange.bind(this);
         
    }

    state = {
        file: null,
        firstname: '',
        lastname: '',
        phone: '',
        currentJob: '',
        geoloc: '',
        value:'',
        route: '',
        street_number: '',
        locality: '',
        administrative_area_level_2: '',
        administrative_area_level_1: '',
        country: '',
        postal_code: '',
        formatted_address:"",
        lat:"",
        lng:"",
        linkedin: '',
        twitter: '',
        website: '',
        mediaId: null,
        mediaUrl: null,
        thumbnails:null,
        heure: null,
        companyId: null,
        address:'',
        errorMessage:'',
        open: false,
        loading: true,
        openSnack: false,
        cv:false,
    };

    UNSAFE_componentWillReceiveProps(nextProps) {
        this.setState({
            firstname: this.state.firstname,
            lastname: this.state.lastname,
            phone: this.state.phone,
            currentJob: this.state.currentJob,
            geoloc: this.state.geoloc,
            value: this.state.value,
            route: this.state.route,
            street_number: this.state.street_number,
            locality: this.state.locality,
            administrative_area_level_2: this.state.administrative_area_level_2,
            administrative_area_level_1: this.state.administrative_area_level_1,
            country: this.state.country,
            postal_code: this.state.postal_code,
            formatted_address : this.state.formatted_address,
            lat:this.state.lat,
            lng: this.state.lng,
            linkedin: this.state.linkedin,
            twitter: this.state.twitter,
            website: this.state.website,
            mediaId: nextProps.mediaId,
            mediaUrl: nextProps.mediaUrl,
            thumbnails: nextProps.thumbnails,
            heure: nextProps.heure,
            companyId: nextProps.companyId,
            cvLink: nextProps.cvLink,
            loading: nextProps.loading,
            openSnack: !!!_.isEmpty(nextProps.errors),
        })
        if (nextProps.loading) {
            const success = {};
            success.message ="CV mis à jour";
            console.log("CV mis à jour!!!")
            this.setState({ success });
            
          }
    }

    componentDidMount() {
        console.log("ANSWER ! ");
        console.log(this.props);
        this.setState({
            firstname: this.props.user.firstname,
            lastname: this.props.user.lastname,
            phone: this.props.user.phone,
            currentJob: this.props.user.currentJob,
            value: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
            geoloc: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
            route: "",
            street_number: "",
            locality: "",
            administrative_area_level_2: "",
            administrative_area_level_1: "",
            country: "",
            postal_code: "",
            formatted_address:"",
            lat:"",
            lng:"",
            linkedin: this.props.user.linkedin,
            twitter: this.props.user.twitter,
            website: this.props.user.website,
            video: this.props.answer,
            mediaUrl : this.props.mediaUrl,
            thumbnails : this.props.thumbnails,
            heure : this.props.heure,
            loading: false,
            cvLink: this.props.user.cv

        })
        console.log(this.state);
    }
    
    inputFilesystemChange = (e) => {
    this.uploadMediaCv(e)
    }
    
    uploadMediaCv = (e) => {
    var file = e.target.files[0]

    const data = new FormData()
    data.append('upload', file)
    this.props.uploadMediaCv(data)
    }

    AfficherSuccess() {
        if (!this.state.success || !this.state.success.message) {
            console.log("Erreur Upload CV");
            return "";
        } else if (this.state.success.length != 0 && this.state.success.message != "") {
            return (
                <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
                <Alert onClose={() => this.setState({open: false})} severity="success">
                    {ReactHtmlParser(this.state.success.message)}
                </Alert>
                </Snackbar>
            );
        }
        return "";
    }
    

    AfficherLienCv() {
        console.log("afficher lien");
        if (this.state.cvLink !="") {
        
            return (
            
            <Fragment>
            
                <Typography >
                    <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} 
                    target="_blank"
                    style={{ 
                    color:'#1E2327',
                    '&:hover': {
                        color: '#1E2327',
                    },
                    backgroundColor: '#F3F3F4',
                    width:'100%',
                    fontWeight: '500',
                    fontSize: '1em',
                    padding:'15px',
                    margin:'20px 0',

                    }}
                    >
                    Visualiser mon CV
                    </a>
                    <br />
                
                </Typography>
                
            </Fragment>
            
            );
        
        }
        return "";
    }
       



    openDialog() {
        this.setState({ open: true });
    }

    closeDialog() {
        this.setState({ open: false });
    }

    refreshDialog() {
        this.setState({ open: false });
        window.location.reload();
    }

    onChange = (e) => {

        this.setState({
            value: e.target.value
        });

        if (e.target.value === '') {
            console.log('cleared');
            //this.props.onSelectionChanged('');
        }
    }

    remplirLocation = (typeDonnee, donnee) =>{
        console.log("DEBUT remplirLocation");
        console.log(typeDonnee);
        console.log(donnee);
        if(typeDonnee=='"street_number"') {
            this.setState({ street_number: donnee.replace('"', '') }) 
        }else if(typeDonnee=='"route"') {
            this.setState({ route: donnee.replace('"', '') }) 
        }else if(typeDonnee=='"locality"') {
            this.setState({ locality: donnee.replace('"', '') }) 
        }else if(typeDonnee=='"administrative_area_level_2"') {
            this.setState({ administrative_area_level_2: donnee.replace('"', '') }) 
        }else if(typeDonnee=='"administrative_area_level_1"') {
            this.setState({ administrative_area_level_1: donnee.replace('"', '') }) 
        }else if(typeDonnee=='"country"') {
            this.setState({ country: donnee.replace('"', '') }) 
        }else if(typeDonnee=='"postal_code"') {
            this.setState({ postal_code: donnee.replace('"', '') }) 
        }
        console.log("FIN remplirLocation");  
        
    }

    onSuggestionSelected = (suggestion) => {
        
        console.log('Selected suggestion:', suggestion)
        let address = suggestion.description;
        var words = address.split(',');
        if(words.length<3){
            address = "mairie de "+address;
        }
        this.setState({ geoloc: address})
        this.setState({
            value: address
        });

        geocodeByAddress(address)
            .then(address => {
                console.log("ADRESSE");
                console.log(address);
                if(address[0].address_components[0]){
                    this.remplirLocation(JSON.stringify(address[0].address_components[0].types[0]), JSON.stringify(address[0].address_components[0].long_name))
                }
                if(address[0].address_components[1]){
                    this.remplirLocation(JSON.stringify(address[0].address_components[1].types[0]), JSON.stringify(address[0].address_components[1].long_name))
                }
                if(address[0].address_components[2]){
                    this.remplirLocation(JSON.stringify(address[0].address_components[2].types[0]), JSON.stringify(address[0].address_components[2].long_name))
                }
                if(address[0].address_components[3]){
                    this.remplirLocation(JSON.stringify(address[0].address_components[3].types[0]), JSON.stringify(address[0].address_components[3].long_name))
                }
                if(address[0].address_components[4]){
                    this.remplirLocation(JSON.stringify(address[0].address_components[4].types[0]), JSON.stringify(address[0].address_components[4].long_name))
                }
                if(address[0].address_components[5]){
                    this.remplirLocation(JSON.stringify(address[0].address_components[5].types[0]), JSON.stringify(address[0].address_components[5].long_name))
                }
                if(address[0].address_components[6]){
                    this.remplirLocation(JSON.stringify(address[0].address_components[6].types[0]), JSON.stringify(address[0].address_components[6].long_name))
                }
                if(address[0].geometry){

                    console.log(address[0].geometry.location_type);
                    let gps =JSON.stringify(address[0].geometry.location);
                    const obj = JSON.parse(gps);  
                    this.setState({ formatted_address: JSON.stringify(address[0].formatted_address) })     
                    this.setState({ lat: obj.lat.toString()})     
                    this.setState({ lng: obj.lng.toString()})     
                }
                
                
                // console.log("GEOLOC ON geocodeByAddress")
                // console.log(this.state.geoloc)
                // document.getElementById("geoloc").value =JSON.stringify(address[0]);
                // this.props.onSelectionChanged(address[0]);
            })
            .catch(error => console.error('Error', error))
    }

    onSuggestionSelected(suggestion) {
        
        // Add your business logic here. In this case we just log...
        console.log('Selected suggestion:', suggestion)
      }

    renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions, loading }) => (
        <div>
          <input className={styles.inputSearchBar}  {...getInputProps()} />
          <div >
            {loading && <div>Loading...</div>}
            {suggestions.map(suggestion => {
              const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
              const style = suggestion.active
                      ? { backgroundColor: 'red', cursor: 'pointer',border: '1px solid' }
                      : { backgroundColor: '#123456', cursor: 'pointer',border: '1px solid' };
              return (<div {...getSuggestionItemProps(suggestion,{className,style})}>
                <span >{suggestion.description}</span> 
              </div>
              )
            })}
          </div>
        </div>
      );


    callbackFunc  = ( autoCompleteData ) => {
		//You can use the address data, passed by autocomplete as you want.
	}



    handleChange = (e) => {    
        this.setState({ [e.target.name]: e.target.value })
    }


    

    onSubmit = (e) => {
        e.preventDefault()
        //TODO : Vérifier si le nom et prénom sont renseignés
        console.log("firstname")
        console.log(this.state.firstname)
        const data = new FormData()
        
        data.append('firstname', this.state.firstname)
        data.append('lastname', this.state.lastname)
        data.append('phone', this.state.phone)
        data.append('currentJob', this.state.currentJob)
        console.log("GEOLOC ON SUBMIT")
        console.log(this.state)
        data.append('geoloc', this.state.geoloc)
        
        data.append('street_number', this.state.street_number.replace('"', ''))
        data.append('route', this.state.route.replace('"', ''))
        data.append('locality', this.state.locality.replace('"', ''))
        data.append('administrative_area_level_2', this.state.administrative_area_level_2.replace('"', ''))
        data.append('administrative_area_level_1', this.state.administrative_area_level_1.replace('"', ''))
        data.append('country', this.state.country.replace('"', ''))
        data.append('postal_code', this.state.postal_code.replace('"', ''))
        data.append('formatted_address', this.state.formatted_address.replace('"', ''))
        data.append('lat', this.state.lat)
        data.append('lng', this.state.lng)
        //
        data.append('linkedin', this.state.linkedin)
        data.append('twitter', this.state.twitter)
        data.append('website', this.state.website)

        //TODO:maybe add this two in a single transactionnal saga
        this.props.updateUserRequest(data)
        //TODO: faire appel à une méthode qui va encoyer le mail a l'entreprise 
        
        // this.props.companyMails.map((user) =>
        //     //TODO Envoyer un mail a chaque user
        //     console.log(user.email)
        // )
        // US 471 : TODO envoyer le lien du cv pour le mettre dans la candidature (this.state.cvLink)
        
        console.log(this.state.cvLink, "lien CV")
        this.props.postAdAnswerRequest(
            {
                adId: this.props.adId,
                companyId: this.props.companyId,
                mediaId: this.props.mediaId,
                mediaUrl: this.props.mediaUrl,
                thumbnails : this.props.thumbnails,
                heure: this.props.heure
            })
    }

    // inputFilesystemChange = (e) => {

    //     console.log("inputFilesystemChange");
    //     var file = e.target.files[0]
    //     this.setState({ picture: file })

    //     const data = new FormData()
    //     data.append('file', file)
    //     this.props.updateUserPictureRequest(data)
    // }
    recupererAdresse =()=>{
        geocodeByAddress('1 rue de la laine, Questembert')
        .then(results => getLatLng(results[0]))
        .then(({ lat, lng }) =>
            console.log('Successfully got latitude and longitude', { lat, lng })
        )
        geocodeByAddress('1 rue de la laine, Questembert')
        .then(results => console.log(results))
        .catch(error => console.error(error));
    }
    

    

    render() {
        const { classes, user } = this.props
        const logoUrl = user.picture;
        const { loading } = this.state;
        const inputProps = {
            value: this.state.address,
            onChange: this.onChange,
          }
          const searchOptions = {
            componentRestrictions: { country: ['fr'] },
          }
        
        return (
            <section className={classes.container}>
                
                <form className={classes.form}
                    autoComplete="off">
                    {!!logoUrl && <Avatar className={classes.logo}
                        classes={{ img: classes.MuiAvatarImg }}
                        src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl} alt="candidatLogo" />}

                    {/* {!!user.pictureLoading && <Loader />}     */}
                    {/* {!!!user.pictureLoading && !!!logoUrl &&
                        (<Fragment><input
                            type="file" accept="image/*" capture="filesystem"
                            className={classes.input}
                            style={{ display: 'none' }}
                            id="raised-button-file"
                            multiple
                            type="file"
                            onChange={this.inputFilesystemChange}
                        />
                            <label htmlFor="raised-button-file">
                                <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
                                    <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg'
                                        className={classes.iconButton} />
                                    <Typography align="left" className={classes.textButton}>
                                        J'<span className={classes.underlined}>importe</span> ma photo de profil
                                    </Typography>
                                    <KeyboardArrowRightIcon className={classes.InputKeyboardArrowRightIcon} />
                                </Button>
                            </label></Fragment>)
                    } */}
                    <Player fluid={false} width={"75%"} height={350} 
                    playsInline className={classes.player} 
                     src={publicRuntimeConfig.symphonyUrl + "uploads/videos/"+this.state.mediaUrl}
                    //src={this.state.mediaUrl}
                    // src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
                    />

                    
                    <Button className={classes.remplacerButton} onClick={this.openDialog.bind(this)}>
                        Remplacer ma vidéo
                    </Button>
                    <Dialog open={this.state.open}>
                        <DialogTitle> Souhaitez-vous remplacer votre vidéo de réponse ?</DialogTitle>
                        <DialogContent className={classes.popup}> Cette vidéo et tous les éléments de votre candidature seront définitivement supprimés. Vous pourrez importer ou réaliser une nouvelle vidéo de réponse. </DialogContent>
                        <DialogActions>
                        
                        <Button onClick={this.closeDialog.bind(this)} autoFocus>
                            Annuler
                        </Button>
                        <Button onClick={this.refreshDialog.bind(this)} >
                            Remplacer
                        </Button>
                        </DialogActions>
                    </Dialog>

                    
                    
                     
                    <TextField
                        name="firstname"
                        required
                        id="outlined-required"
                        label="Prénom"
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        value={this.state.firstname}
                        onChange={this.handleChange}
                        error={!!_.isEmpty(this.state.firstname)}
                        helperText={!!_.isEmpty(this.state.firstname) && "Veuillez saisir votre prénom"}
                    />

                    <TextField
                        name="lastname"
                        required
                        id="outlined-required"
                        label="Nom"
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        value={this.state.lastname}
                        onChange={this.handleChange}
                        error={!!_.isEmpty(this.state.lastname)}
                        helperText={!!_.isEmpty(this.state.lastname) && "Veuillez saisir votre nom"}
                        required
                    />

                    <div 
                    className={classes.conteneurGoogle}
                    classes={{ root: classes.rootTextfield }} 
                    style={{ position: 'relative', zIndex:2, width: '100%' }}>
                         <label htmlFor="outlined-required"
                          className={classes.labelGeoloc}>
                            Adresse
                        </label>
                        <div className={classes.conteneurGoogleComposant}>
                            <GooglePlaceAutocomplete
                                style={{ paddingLeft:'14px !important', left: 0, right: 0, zIndex: '2 !important', width: '100%' }}
                                name="location"
                                label="Location"
                                id="outlined-required"
                                variant="outlined"
                                textFieldProps={{ id: "outlined-required" }}
                                className={classes.textField}
                                classes={{ root: classes.rootTextfield }} 
                                options={this.searchOptions}
                                onSuggestionSelected={this.onSuggestionSelected}
                                textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Ex : Rue de Rivoli, Paris, France', fullWidth: true, size:"small"}}
                                types={['(regions)']}
                                componentRestrictions={{country: 'fr'}}
                                renderTarget={() => (
                                    <div   
                                    style={{
                                        
                                        width: '100%',
                                        zIndex:9
                                    }}
                                    >
                                    </div>
                                )}
                            />
                        </div>
                       
                        {/* <Input 
                        name="geoloc" 
                        id="geoloc" 
                        label="geoloc" 
                        ref="geoloc" 
                        onChange={this.handleChange}
                        value={this.state.geoloc =='null' || this.state.geoloc ==''  ? '' :this.state.geoloc}
                        /> */}
                    </div>

                    <TextField
                        name="phone"
                        id="outlined"
                        label="Téléphone"
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        value={this.state.phone}
                        onChange={this.handleChange}
                        type="tel"
                        helperText="Renseignez votre numéro de téléphone pour permettre au recruteur de vous contacter"
                    />

                    <TextField
                        disabled
                        id="outlined-required"
                        label="E-mail"
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        value={user.email}
                    />

                    <TextField
                        name="currentJob"
                        id="outlined"
                        label="Poste actuel"
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        value={this.state.currentJob =='null' || this.state.currentJob ==''  ? '' :this.state.currentJob}
                        onChange={this.handleChange}
                    />

                    {this.AfficherSuccess()}
                    <div className={classes.containerImport}>
                        <input
                            type="file" 
                            accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .pdf, .odt"
                            className={classes.input+' cypButtonImportVid'}
                            style={{ display: 'none' }}
                            id="import-button-file"
                            onChange={this.inputFilesystemChange}
                        />
                        <label htmlFor="import-button-file">
                            <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
                            
                            
                            <GetApp className={classes.icon} /> Importer mon CV 
                            
                            
                            </Button>

                        </label>
                        <Hidden>&nbsp;</Hidden>
                        {this.AfficherLienCv()}
                    </div>          
                    <TextField
                        name="linkedin"
                        id="outlined"
                        label="Linkedin"
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        placeholder="http://www.linkedin.com/in/"
                        value={this.state.linkedin =='null' || this.state.linkedin ==''  ? '' :this.state.linkedin}
                        onChange={this.handleChange}

                    />

                    <TextField
                        name="twitter"
                        id="outlined"
                        label="Twitter"
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        placeholder="http://twitter.com/.."
                        value={this.state.twitter =='null' || this.state.twitter ==''  ? '' :this.state.twitter}
                        onChange={this.handleChange}
                    />

                    <TextField
                        name="website"
                        id="outlined"
                        label="Site internet"
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        placeholder="http://monsite.fr"
                        value={this.state.website =='null' || this.state.website ==''  ? '' :this.state.website}
                        onChange={this.handleChange}
                    />
                    
                </form>
                <div id="F" className={classes.foot}>
                <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Envoyer ma candidature</Button>
                </div>
            </section>
        )
    }
}

function mapStateToProps(state, ownProps) {
    // console.log(state.media.message.heure);
    return {
        user: state.user ,
        cvLink : state.mediaCv.message,
        loading: !!state.media.loading,
        cv : true,
        // user: state.user,
        // loading: !!state.user.loading,
        pictureLoading: !!state.user.pictureLoading,
        errors: state.user.errors || ownProps.errors,
        mediaId: state.media.message && state.media.message.mediaId,
        mediaUrl: state.media.message && state.media.message.originalUrl,
        thumbnails: state.media.message && state.media.message.thumbnails,
        mediaUrlVimeo: state.media.message && state.media.message.uriVimeo,
        mediaFileName: state.media.message && state.media.message.filename,
        heure: state.media.message && state.media.message.heure,
    };
    
}

export default withStyles(styles)(connect(mapStateToProps, { postAdAnswerRequest, updateUserRequest, updateUserPictureRequest, uploadMediaCv })(Answer))