import React, {useEffect} from 'react';
import {createStyles, Grid, makeStyles, Theme, Typography} from "@material-ui/core";
import axios from "axios";
import Cookies from "js-cookie";
import {useDispatch, useSelector} from "react-redux";
import Avatar from "@material-ui/core/Avatar";
import { hideModal, listingActions, userActions} from "../../../actions";
import {State} from "react-select/lib/Async";
import LoginForm from "../../../components/modals/LoginDialog";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {

        },profileContainer: {
            paddingTop: '20px',
            paddingBottom: '10px',
            paddingLeft: '20px',
            paddingRight: '20px',
            display: 'flex',
            alignItems: 'center',
            flexDirection: 'row',
            justifyContent: 'flex-start',
            flexwrap: 'wrap',



        },profileTextfieldsContainer: {
            paddingTop: '35px',
            paddingLeft: '100px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'column',
            flex: '0 0 430px',

        },profilePictureContainer: {
            paddingBottom: '150px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'column',

        }, bigAvatar: {
            margin: 10,
            width: 120,
            height: 120,
        },
        textField: {
            padding: '16px',
        },
    }),
);
/*får feil token når en bruker denne
function getCookie(name: string) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function getCurrentUser() {
    let config = {
        headers: {
            Authorization: "Bearer " + getCookie("authentication_token")
        }
    }

    console.log(config);

    return axios.get("api/ApplicationUser/GetCurrentUser", config).then((response) => {
        return response;
    });
}
*/


function ProfileView(props: any) {
    const classes = useStyles();
    const dispatch = useDispatch();

    const userdata = useSelector((state: any) => state.user.userData);


    const [form, setForm] = React.useState({
        username: 'test',
        email: 'test@løk',
        phonenumber: '911',
        firstname:'løken',
        lastname: 'geir',
        password: 'hehe'
    });

    const handleFormChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setForm({
            ...form,
            [event.target.name]: event.target.value
        });
    };

    useEffect(() => {
        const getCurrentUser = () => {
        return dispatch({type: userActions.API_USER_REQUEST}
        )};

        getCurrentUser();
    }, []);



    return (
        <div>
            <div className={classes.profileContainer}>
                <div className={classes.profilePictureContainer}>
                    <Avatar alt="Remy Sharp" src={require('../../../static/images/avatar.png')} className={classes.bigAvatar} />
                    <Typography gutterBottom variant="h5" component="h2" >
                        {props.data.description}
                    </Typography>
                </div>
                <form className={classes.profileTextfieldsContainer}>
                    <TextField
                        id="username"
                        fullWidth
                        label="username"
                        className={classes.textField}
                        value={form.username}
                        onChange={handleFormChange}

                    />
                    <TextField
                        id="email"
                        fullWidth
                        label="email"
                        className={classes.textField}
                        value={form.email}
                        onChange={handleFormChange}

                    />
                    <TextField
                        id="email"
                        fullWidth
                        label="email"
                        className={classes.textField}
                        value={form.email}
                        onChange={handleFormChange}

                    />

                    <TextField
                        id="email"
                        fullWidth
                        label="email"
                        className={classes.textField}
                        value={form.email}
                        onChange={handleFormChange}

                    />

                </form>

            </div>
        </div>
    );
}

export default ProfileView;