import React, { useState, useEffect } from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import ReactHtmlParser from "react-html-parser";
import Dashboard from "@material-ui/icons/Dashboard";
import Icon from "@material-ui/core/Icon";
import Rating from '@material-ui/lab/Rating';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import CustomTabs from "components/CustomTabs/CustomTabs.js";
import NumberFormat from 'react-number-format';
import Select from 'react-select';

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
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 Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";

const useStyles = makeStyles(styles);

const DetailDataYGP = function ({ backend, detailygp, ...props })  {
  console.log(detailygp);
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
        );
    const [value, setValue] = React.useState(5);
    const [value5, setValue5] = React.useState(5);
    const [value4, setValue4] = React.useState(4);
    const [value3, setValue3] = React.useState(3);
    const [value2, setValue2] = React.useState(2);
    const [value1, setValue1] = React.useState(1);
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const YGPdetails = detailygp.map((data) => {
        return (
            <div>
                <GridContainer>
                    <Grid fluid xs={5}>
                    <div className={classes.section} id="notifications">
                        <div className={classes.section}>
                            <div className={classes.container}>
                            <GridContainer>
                                <GridItem className={classes.marginAuto}>
                                    <Card>
                                        <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img["url"]}`} />
                                    </Card>
                                    <div align="center">
                                        <h3><b>Pilih Varian Sparepart</b></h3>
                                        <Select
                                            getOptionLabel={option => `${option.name}`}
                                            getOptionValue={option => option.id}
                                            options={data.ygp_units}
                                            isMulti
                                            instanceId="name"
                                            placeholder="Pilih Varian"
                                            onChange={values => handleName(values)}
                                        />
                                        <h3><b>Ulasan (17)</b></h3>
                                        <h5><b>{data.name}</b></h5>
                                        <GridContainer>
                                            <Grid fluid xs={5}>
                                              <h1><b>5.0</b></h1>
                                              <Rating align="center" name="read-only" value={value} readOnly/>
                                            </Grid>
                                        <Grid fluid xs={5}>
                                          <GridContainer>
                                            <Grid fluid xs={3}>
                                              <Rating name="read-only" value={value5} readOnly/>
                                            </Grid>
                                            <Grid fluid xs={5}>
                                            </Grid>
                                          </GridContainer>
                                          <GridContainer>
                                            <Grid fluid xs={5}>
                                              <Rating name="read-only" value={value4} readOnly/>
                                            </Grid>
                                            <Grid fluid xs={5}>
                                            </Grid>
                                          </GridContainer>
                                          <GridContainer>
                                            <Grid fluid xs={5}>
                                              <Rating name="read-only" value={value3} readOnly/>
                                            </Grid>
                                            <Grid fluid xs={5}>
                                            </Grid>
                                          </GridContainer>
                                          <GridContainer>
                                            <Grid fluid xs={5}>
                                              <Rating name="read-only" value={value2} readOnly/>
                                            </Grid>
                                            <Grid fluid xs={5}>
                                            </Grid>
                                          </GridContainer>
                                          <GridContainer>
                                            <Grid fluid xs={5}>
                                              <Rating name="read-only" value={value1} readOnly/>
                                            </Grid>
                                            <Grid fluid xs={5}>
                                            </Grid>
                                          </GridContainer>
                                        </Grid>
                                      </GridContainer>
                                    </div>
                                </GridItem>
                            </GridContainer>
                            </div>
                        </div>
                    </div>
                    </Grid>
                    <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
                        <h2><b>{data.name}</b></h2>
                        <Rating name="read-only" value={value} readOnly/>
                        <div style={{marginTop:"-20px"}}>
                          <h3><b>
                            <NumberFormat value={data.price1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                          </b></h3>
                        </div><br/>
                        <CustomTabs
                        headerColor="info"
                        tabs={[
                          {
                            tabName: "Detail Product",
                            tabContent: (
                              <p className={classes.textCenter}>
                                <b>{ReactHtmlParser(data.description)}</b>
                              </p>
                            ),
                          },
                          {
                            tabName: "Info Penting",
                            tabContent: (
                              <p className={classes.textCenter}>
                                <h4><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></h4>
                                <ul>
                                  <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
                                  <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
                                  <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
                                  <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
                                </ul>

                                <h4><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></h4>
                                <h4><b>Harga</b></h4>
                                <ul>
                                  <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>
                                  <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
                                  <li>Harga OTR sewaktu-waktu dapat berubah.</li>
                                  <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
                                  <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>
                                  <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
                                </ul>

                                <h4><b>Dokumen</b></h4>
                                <ul>
                                  <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
                                  <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
                                  <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
                                  <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
                                  <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
                                </ul>

                                <h4><b>*tidak termasuk Sabtu dan Minggu.</b></h4>
                              </p>
                            ),
                          },
                        ]}
                      />
                    </Grid>
                </GridContainer>
            </div>
        );
    })
    return (
        <Card className={classes.textCenter}>
            <div align="center">
                <CardHeader color="info">Product Detail</CardHeader>
            </div>
            <CardBody>
                <div>
                    {YGPdetails}
                </div>
            </CardBody>
            <CardFooter className={classes.textMuted} textAlign="center">
                © 2020 , All Right Reserved by @Thamrin Brother Company
            </CardFooter>
        </Card>
    );
}

export default DetailDataYGP;