import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import Select from 'react-select';

import People from "@material-ui/icons/People";
import LocationOn from "@material-ui/icons/LocationOn";
import Lock from "@material-ui/icons/Lock";
import image1 from "../../../assets/img/mail.png"

import CustomInput from "components/CustomInput/CustomInput.js";
import InputAdornment from "@material-ui/core/InputAdornment";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import GridContainer from "components/Grid/GridContainer.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import NavPills from "components/NavPills/NavPills.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/pillsStyle.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        padding: theme.spacing(2),
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
}));

const DataApparel = function ({ selected, handleName, backend, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, ...props }) {
    const [pass, setPass] = React.useState("");
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    return (
        <div>
        <Card className={classes.textCenter} align="center">
            <CardBody>
                <div align="center">
                    <div align="center" className={classes.section} id="notifications" style={{marginTop:"-50px"}}>
                        <SnackbarContent
                        message={
                            <h4>Profile</h4>
                        }
                        align="center"
                        color="info"
                        />
                    </div>
                    <GridContainer justify="center" style={{padding: "10px"}}>
                        <NavPills
                            color="info"
                            horizontal={{
                                tabsGrid: { xs: 4, sm: 3, md: 3 },
                                contentGrid: { xs: 14, sm: 9, md: 9 }
                            }}
                            tabs={[
                            {
                                tabButton: "Profile",
                                tabIcon: People,
                                tabContent: (
                                    <Grid container>
                                        <Grid item xs={12}>
                                            <div align="left">
                                                <h3>Profile Saya</h3>
                                                <span>Kelola informasi profil Anda untuk mengontrol, melindungi dan mengamankan akun</span><hr></hr>
                                            </div>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    Username
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                    : Yusmar15
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    Nama
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                    : Yusmar
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    Email
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                    : yusmardianto@thamrin.co.id
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    Nomer Telpon
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                    : 087797315685
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    Jenis Kelamin
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                    : Laki - Laki
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Button 
                                        color="info" round
                                        href={"/yamaha/product/product_detail?s="}
                                        >
                                            <Icon className={classes.icons}>open_in_new</Icon>Edit Profile
                                        </Button>
                                    </Grid>
                                )
                            },
                            {
                                tabButton: "Alamat",
                                tabIcon: LocationOn,
                                tabContent: (
                                    <Grid container>
                                        <Grid item xs={12}>
                                            <div align="left">
                                                <h3>Alamat Saya</h3>
                                                <span>Kelola informasi Alamat Anda untuk Proses Pengirim Barang</span>
                                            </div><hr></hr>
                                        </Grid>
                                        <img src={image1} style={{width:"920px"}}/><br></br>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    Nama
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                    : Yusmar
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    Telpon
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                    : 087797315685
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    Alamat
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                    : Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Button 
                                        color="info" round
                                        href={"/yamaha/product/product_detail?s="}
                                        >
                                            <Icon className={classes.icons}>open_in_new</Icon>Edit Alamat
                                        </Button>
                                    </Grid>
                                )
                            },
                            {
                                tabButton: "Ubah Password",
                                tabIcon: Lock,
                                tabContent: (
                                    <Grid container>
                                        <Grid item xs={12}>
                                            <div align="left">
                                                <h3>Ubah Password</h3>
                                                <span>Untuk keamanan akun Anda, mohon untuk tidak menyebarkan password Anda ke orang lain</span>
                                            </div><hr></hr>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                    <br></br>
                                                    Password Saat Ini
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                <CustomInput
                                                    labelText="Password Saat Ini"
                                                    id="pass"
                                                    value={pass}
                                                    formControlProps={{
                                                        fullWidth: true,
                                                    }}
                                                    inputProps={{
                                                        onChange: (event) => setPass(event.target.value),
                                                        type: "password",
                                                        endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Icon className={classes.inputIconsColor}>
                                                            lock_outline
                                                            </Icon>
                                                        </InputAdornment>
                                                        ),
                                                        autoComplete: "off",
                                                    }}
                                                />
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                <br></br>
                                                    Password Baru
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                <CustomInput
                                                    labelText="Password Baru"
                                                    id="pass"
                                                    value={pass}
                                                    formControlProps={{
                                                        fullWidth: true,
                                                    }}
                                                    inputProps={{
                                                        onChange: (event) => setPass(event.target.value),
                                                        type: "password",
                                                        endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Icon className={classes.inputIconsColor}>
                                                            lock_outline
                                                            </Icon>
                                                        </InputAdornment>
                                                        ),
                                                        autoComplete: "off",
                                                    }}
                                                />
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Grid container style={{padding:"10px"}}>
                                            <Grid item xs>
                                                <div align="left">
                                                <br></br>
                                                    Konfirmasi Password
                                                </div>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <div align="left">
                                                <CustomInput
                                                    labelText="Konfirmasi Password"
                                                    id="pass"
                                                    value={pass}
                                                    formControlProps={{
                                                        fullWidth: true,
                                                    }}
                                                    inputProps={{
                                                        onChange: (event) => setPass(event.target.value),
                                                        type: "password",
                                                        endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Icon className={classes.inputIconsColor}>
                                                            lock_outline
                                                            </Icon>
                                                        </InputAdornment>
                                                        ),
                                                        autoComplete: "off",
                                                    }}
                                                />
                                                </div>
                                            </Grid>
                                            <Grid item xs>
                                            </Grid>
                                        </Grid>
                                        <Button 
                                        color="info" round
                                        href={"/yamaha/product/product_detail?s="}
                                        >
                                            <Icon className={classes.icons}>open_in_new</Icon> Simpan
                                        </Button>
                                    </Grid>
                                )
                            }
                            ]}
                        />
                    </GridContainer>
                </div><br></br><br></br>
            </CardBody>
        </Card>
        </div>
    );
}

export default DataApparel;