import React from 'react'
import { makeStyles } from '@material-ui/core/styles'

import Grid from '@material-ui/core/Grid'
import Card from 'components/Card/Card.js'
import CardBody from 'components/Card/CardBody.js'
import CardHeader from 'components/Card/CardHeader.js'
import CardFooter from 'components/Card/CardFooter.js'
import styles from 'assets/jss/nextjs-material-kit/pages/profilePage.js'
import Button from "components/CustomButtons/Button.js";

import Icon from "@material-ui/core/Icon";
import InputLabel from '@material-ui/core/InputLabel';
import TextField from '@material-ui/core/TextField';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { Hidden } from '@material-ui/core'

const useStyles = makeStyles(styles)

const EditProfile = function ({ province, cities, editprofile, user, profile, ...props }) {
    console.log(province);
    const [age, setAge] = React.useState('');

    const handleChange = (event) => {
        setAge(event.target.value);
    };
    const classes = useStyles()

    // const Province = province.map((data) => {
    //     return (
    //         <div>
                
    //         </div>
    //     );
    // })

    return (
        <Card className={classes.textCenter}>
        <div align='center'>
            <CardHeader color='info'>Edit Profile</CardHeader>
        </div>
        <CardBody>
            <div>
            <div align='center'>
            <Grid item='item' xs={12}>
                <div align='left'>
                <h3>Edit Data Pribadi</h3>
                <span>
                    Kelola informasi profil Anda untuk mengontrol, melindungi dan
                    mengamankan akun
                </span>
                <hr></hr>
                </div>
            </Grid>
            <Grid
                container
                spacing={3}
                justify='center'
                style={{
                padding: '10px'
                }}
            >
                <Grid item xs={6}>
                <TextField
                    id='outlined-full-width'
                    label='Username'
                    style={{ margin: 8 }}
                    placeholder='Masukan Username Baru'
                    fullWidth
                    margin='normal'
                    InputLabelProps={{
                    shrink: true
                    }}
                    variant='outlined'
                />
                </Grid>
                <Grid item xs={6}>
                <TextField
                    id='outlined-full-width'
                    label='Nama'
                    style={{ margin: 8 }}
                    placeholder='Masukan Nama Baru'
                    fullWidth
                    margin='normal'
                    InputLabelProps={{
                    shrink: true
                    }}
                    variant='outlined'
                />
                </Grid>
                <Grid item xs={6}>
                <TextField
                    id='outlined-full-width'
                    label='Email'
                    style={{ margin: 8 }}
                    placeholder='Masukan Email Baru'
                    fullWidth
                    margin='normal'
                    InputLabelProps={{
                    shrink: true
                    }}
                    variant='outlined'
                />
                </Grid>
                <Grid item xs={6}>
                <TextField
                    id='outlined-full-width'
                    label='Nomer Telpon'
                    style={{ margin: 8 }}
                    placeholder='Masukan Nomer Telpon Baru'
                    fullWidth
                    margin='normal'
                    InputLabelProps={{
                    shrink: true
                    }}
                    variant='outlined'
                />
                </Grid>
            </Grid>
            </div>
            <br></br>
            <Grid item='item' xs={12}>
            <div align='left'>
                <h3>Edit Data Alamat</h3>
                <span>
                Kelola informasi alamat anda untuk kemudahan dalam pengirim barang
                </span>
                <hr></hr>
            </div>
            </Grid>
            <Grid
            container
            spacing={3}
            justify='center'
            style={{
                padding: '10px'
            }}
            >
            <Grid item xs={6}>
                <FormControl className={classes.formControl}>
                <InputLabel id='demo-simple-select-helper-label'>
                    Provinsi
                </InputLabel>
                <Select
                    style={{ width: '580px' }}
                    labelId='demo-simple-select-helper-label'
                    id='demo-simple-select-helper'
                    value={age}
                    onChange={handleChange}
                >
                    <MenuItem value=''>
                    <em>None</em>
                    </MenuItem>
                    <MenuItem value={1}>asdasdsada</MenuItem>
                </Select>
                </FormControl>
            </Grid>
            <Grid item xs={6}>
                <FormControl className={classes.formControl}>
                <InputLabel id='demo-simple-select-helper-label'>Kota</InputLabel>
                <Select
                    style={{ width: '580px' }}
                    labelId='demo-simple-select-helper-label'
                    id='demo-simple-select-helper'
                    value={age}
                    onChange={handleChange}
                >
                    <MenuItem value=''>
                    <em>None</em>
                    </MenuItem>
                    <MenuItem value={10}>Ten</MenuItem>
                    <MenuItem value={20}>Twenty</MenuItem>
                    <MenuItem value={30}>Thirty</MenuItem>
                </Select>
                </FormControl>
            </Grid>
            <Grid item xs={12}>
                <TextField
                id='outlined-full-width'
                label='Alamat Lengkap'
                placeholder='Masukan Username Baru'
                fullWidth
                margin='normal'
                InputLabelProps={{
                    shrink: true
                }}
                variant='outlined'
                />
            </Grid>
            </Grid>
        </div><br/><br/>
        <div align="center">
        <Button color="info" round href={"/yamaha/cart/checkout?s="}>
            <Icon className={classes.icons}>save</Icon>Simpan Perubahan
        </Button>
        </div>
        </CardBody>
        <CardFooter className={classes.textMuted} textalign='center'>
            © 2020 , All Right Reserved by @Thamrin Brother Company
        </CardFooter>
        </Card>
    )
}

export default EditProfile