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 NumberFormat from 'react-number-format';
import Rating from '@material-ui/lab/Rating';
import CustomTabs from "components/CustomTabs/CustomTabs.js";
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 NavPills from "components/NavPills/NavPills.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";
import Carousel from "react-slick";

const useStyles = makeStyles(styles);

const DataProduct = function ({ backend, detailproduct, ...props })  {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
      classes.imgRaised,
      classes.imgRoundedCircle,
      classes.imgFluid
    );
    const settings = {
      dots: true,
      infinite: true,
      speed: 1000,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      time: 5
    };
    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 ProdcutImgColor = detailproduct.map((data) => {
      return (
        <div>
        </div>
      );
    })
    const Productdetails = detailproduct.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}>
                      <div className="container">
                        <Carousel>
                            <img src={`${backend}${data.img[0]["url"]}`}/>
                            <img src={`${backend}${data.img[1]["url"]}`}/>
                            <img src={`${backend}${data.img[2]["url"]}`}/>
                            <img src={`${backend}${data.img[3]["url"]}`}/>
                            <img src={`${backend}${data.img[4]["url"]}`}/>
                            <img src={`${backend}${data.img[5]["url"]}`}/>
                        </Carousel>
                      </div>
                      <div align="center">
                        <h3><b>Pilih Harga OTR Daerah</b></h3>
                        <Select
                            getOptionLabel={option => `${option.name}`}
                            getOptionValue={option => option.id}
                            options={data.product_otrs}
                            isMulti
                            instanceId="name"
                            placeholder="Pilih Harga OTR"
                            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>
                    {/* <Button color="info" round href={"/product_detail?s="+data.id}>
                      <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
                    </Button> */}
                    </GridItem>
                  </GridContainer>
                </div>
              </div>
            </div>
            </Grid>
            <Grid xs={7} style={{padding:"40px", marginTop:"-60px"}}>
                <h3><b>{data.name}</b></h3>
                <Rating name="read-only" value={value} readOnly/>
                <div style={{marginTop:"-20px"}}>
                  <h3><b>
                    <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> s/d <NumberFormat value={data.price2} 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>
          <NavPills
              color="primary"
              align="center"
              alignCenter
              tabs={[
                // {
                //   tabButton: "Overview",
                //   tabIcon: Dashboard,
                //   tabContent: (
                //     <div>
                //     <GridItem className={classes.marginAuto}>
                //         <div align="justify">
                //          <table>
                //             <tr>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>
                //               </td>
                //               <td>
                //                 <img src={`${backend}${data.img_overview1["url"]}`} />
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <img src={`${backend}${data.img_overview2["url"]}`} />
                //               </td>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>
                //               </td>
                //               <td>
                //                 <img src={`${backend}${data.img_overview3["url"]}`} />
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <img src={`${backend}${data.img_overview4["url"]}`} />
                //               </td>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>
                //               </td>
                //               <td>
                //                 <img src={`${backend}${data.img_overview5["url"]}`} />
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <img src={`${backend}${data.img_overview6["url"]}`} />
                //               </td>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>
                //               </td>
                //               <td>
                //                 <img src={`${backend}${data.img_overview7["url"]}`} />
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <img src={`${backend}${data.img_overview8["url"]}`} />
                //               </td>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>
                //               </td>
                //               <td>
                //                 <img src={`${backend}${data.img_overview9["url"]}`} />
                //               </td>
                //             </tr>
                //             <tr>
                //               <td>
                //                 <img src={`${backend}${data.img_overview10["url"]}`} />
                //               </td>
                //               <td>
                //                 <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>
                //               </td>
                //             </tr>
                //           </table>
                //         </div>
                //       </GridItem>
                //     </div>
                //   ),
                // },
                {
                  tabButton: "Overview",
                  tabIcon: Dashboard,
                  tabContent: (
                    <div>
                    <GridItem className={classes.marginAuto}>
                        <div align="center">
                         <table>
                            <tr>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>
                              </td>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/201912012240262893A2540.jpg"/>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120516484034670K42560.jpg"/>
                              </td>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>
                              </td>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402661202S19702.jpg"/>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123231136996Y5592.jpg"/>
                              </td>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>
                              </td>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173855561Z61407.jpg"/>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173867373B74912.jpg"/>
                              </td>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>
                              </td>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173831375M60860.jpg"/>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402691982X34635.jpg"/>
                              </td>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>
                              </td>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/201912012240264043F92645.jpg"/>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402675980Z35071.jpg"/>
                              </td>
                              <td>
                                <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>
                              </td>
                            </tr>
                          </table>
                        </div>
                      </GridItem>
                    </div>
                  ),
                },
                {
                  tabButton: "Specification",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                      <GridItem className={classes.marginAuto}>
                        <div align="justify">
                          <h2>Spesifikasi Mesin</h2>
                          {ReactHtmlParser(data.spesifikasi_mesin)}<br/><br/>

                          <h2>Spesifikasi Dimensi</h2>
                          {ReactHtmlParser(data.spesifikasi_dimensi)}<br/><br/>

                          <h2>Spesifikasi Rangka</h2>
                          {ReactHtmlParser(data.spesifikasi_rangka)}<br/><br/>

                          <h2>Spesifikasi Kelistrikan</h2>
                          {ReactHtmlParser(data.spesifikasi_kelistrikan)}<br/><br/>
                        </div>
                      </GridItem>
                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Film",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                      <GridItem className={classes.marginAuto}>
                        <div align="justify">
                          {ReactHtmlParser(data.film)}
                        </div>
                      </GridItem>
                    </GridContainer>
                  ),
                },
              ]}
            />
        </div>
      );
    })
    return (
      <Card className={classes.textCenter}>
      <div align="center">
        <CardHeader color="info">Product Detail</CardHeader>
      </div>
      <CardBody>
          <div>
            {Productdetails}
          </div>
      </CardBody>
      <CardFooter className={classes.textMuted} textAlign="center">
        © 2020 , All Right Reserved by @Thamrin Brother Company
      </CardFooter>
    </Card>
    );
}

export default DataProduct;