import React, { useState } from 'react'

//component
import PageBanner from '@/components/Common/PageBanner';
import * as Icon from 'react-feather'
import { useSelector, useDispatch } from 'react-redux'
import { useRouter } from 'next/router'
import { useToasts } from 'react-toast-notifications'

//addon library
import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
resetIdCounter();

import dynamic from 'next/dynamic'
const OwlCarousel = dynamic(import('react-owl-carousel3'))

//library yarn
import NumberFormat from 'react-number-format';
import util from '../../../lib/util';

//sweet alert
import swal from 'sweetalert';

const options = {
    loop: true,
    nav: true,
    dots: false,
    autoplay: true,
    items: 1,
    smartSpeed: 1000,
    autoplayTimeout: 5000,
    navText: [
        "<i className='bx bx-chevron-left'></i>",
        "<i className='bx bx-chevron-right'></i>"
    ],
};

const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
    const [formValue, setFormValue] = React.useState({
        product_img: "",
        product_name: "",
        product_color: "",
        product_price: "",
        product_parts:"",
    });

    const [OTRProduct, setProductOTR] = useState((detailproduct.Product_prices.data&&detailproduct.Product_prices.data.length==1)?detailproduct.Product_prices.data[0].attributes.Price:'');

    const router = useRouter();
    const [displayOwl, setDisplay] = React.useState(false);

    React.useEffect(() => {
        setDisplay(true);
    }, [])

    return (
        <>
            <PageBanner pageTitle="Product Details"/>
                <div className="shop-details-area ptb-80">
                    <div className="container">
                        <div className="row align-items-start">
                            <div className="col-lg-5">
                                {(displayOwl)?<OwlCarousel
                                    className="products-details-image products-details-image-slides owl-carousel owl-theme"
                                    {...options}
                                >
                                    {(detailproduct.Image.data)?detailproduct.Image.data.map((option,idx) => (
                                        <img key={`img${idx}`} src={`/api/util?img=${encodeURIComponent(option.attributes.url||'')}`} />
                                    )):''}

                                </OwlCarousel>:''}
                            </div>

                            <div className="col-lg-7">
                                <div className="products-details">
                                    <h2>   
                                        {detailproduct.Name}
                                    </h2>
                                    <br/>
                                    <h5>
                                        <NumberFormat value={OTRProduct} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                    </h5>
                                    {/* <h3>
                                        <NumberFormat value={data.product_otrs[0].price - data.product_otrs[0].price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                    </h3>
                                    <h5>
                                        <div className="price" style={{ marginTop: "20px" }}>
                                            <NumberFormat
                                                style={{ color: "#EB1928" }}
                                                displayType={'text'}
                                                prefix={'%'}
                                                decimalScale={2}
                                                value={data.discount * 100}
                                            />
                                            <NumberFormat value={data.product_otrs[0].price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                        </div>
                                    </h5> */}

                                    {/* <p>{this.state.selectedOption}</p> */}

                                    {/* <ul className="rating">
                                        <li><i className="flaticon-star-1"></i></li>
                                        <li><i className="flaticon-star-1"></i></li>
                                        <li><i className="flaticon-star-1"></i></li>
                                        <li><i className="flaticon-star-1"></i></li>
                                        <li><i className="flaticon-star-1"></i></li>
                                    </ul> */}

                                    {/* <div className="availability">
                                        Availability: <span>{detailproduct.Stock}</span>
                                    </div> */}
                                    <form
                                        onSubmit={async (e) => {
                                            e.preventDefault();
                                            var newformValue = {
                                                ...formValue,
                                                product_name: detailproduct.Name,
                                                // product_img: detailproduct[0].backend.img[0],
                                            }
                                            setFormValue(newformValue)
                                            // console.log(JSON.stringify(newformValue));
                                            const response = await fetch(
                                                "/api/transaction/AddToCart",
                                                {
                                                    method: "POST",
                                                    headers: {
                                                        'Content-Type': 'application/json'
                                                    },
                                                    body: JSON.stringify(newformValue),
                                                }
                                            );
                                            if (response.ok) {
                                                var res = await response.json();
                                                // console.log("cek response :", res);
                                                if (res["STATUS"] === 1) {
                                                    res["DATA"]["cart"];
                                                    swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
                                                    router.push("/yamaha/Shop/Cart");
                                                }
                                                else {
                                                    swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
                                                }
                                            } else {
                                                swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
                                            }
                                            return false;
                                        }}
                                    >
                                        {
                                            (detailproduct.Product_prices.data&&detailproduct.Product_prices.data.length>0)
                                            ?(
                                                <>
                                                <br />
                                                <label>Harga Product per Daerah <span className="required">*</span></label>

                                                <div className="select-box" placeholder="Pilih Harga OTR">
                                                    <select className="form-select"
                                                        name="product_otr"
                                                        onInput={(e) => {
                                                            setFormValue({
                                                                ...formValue,
                                                                product_price: e.target.value.toString(),
                                                            })
                                                        }}
                                                        onChange={e => setProductOTR(e.target.value)}
                                                    >
                                                        <option value="-">- Harga per Daerah -</option>
                                                        {
                                                            (detailproduct.Product_prices.data.length>1)
                                                            ?detailproduct.Product_prices.data.map((option,idx) => (
                                                                <option key={idx} value={option.attributes.Price}>{(option.attributes.region.data)?option.attributes.region.data.attributes.Name:''}</option>
                                                            ))
                                                            :<option selected value={detailproduct.Product_prices.data[0].attributes.Price}>{(detailproduct.Product_prices.data[0].attributes.region.data)?detailproduct.Product_prices.data[0].attributes.region.data.attributes.Name:''}</option>
                                                        }
                                                    </select>
                                                </div>
                                                </>
                                            )
                                            :""
                                        }

                                        {
                                            (detailproduct.Product_parts.data&&detailproduct.Product_parts.data.length>0)
                                            ?(
                                                <>
                                                <br />
                                                <label>Sub-parts<span className="required">*</span></label>
                                                <div className="select-box" placeholder="Pilih Warna">
                                                    <select className="form-select"
                                                        name="product_parts"
                                                        onChange={e => setProductOTR(e.target.value)}
                                                        onInput={(e) => {
                                                            setFormValue({
                                                                ...formValue,
                                                                product_parts: e.target.value.toString()
                                                            })
                                                        }}
                                                    >
                                                        <option value="0">- Pilih Parts -</option>
                                                        {detailproduct.Product_parts.data.map((option,idx) => (
                                                            <option key={idx} value={(option.attributes.Product_prices.data&& option.attributes.Product_prices.data.length>0)?option.attributes.Product_prices.data[0].attributes.Price:'-'}>{option.attributes.Name}({option.attributes.Part_Code})</option>
                                                        ))}
                                                    </select>
                                                </div>
                                                </>
                                            )
                                            :""
                                        }

                                        {
                                            (detailproduct.Product_colors.data&&detailproduct.Product_colors.data.length>0)
                                            ?(
                                                <>
                                                <br />
                                                <label>Tersedia dalam warna</label>
                                                <br/>
                                                {detailproduct.Product_colors.data.map((option,idx) => (
                                                    <span key={idx}>{option.attributes.Color}{(idx==detailproduct.Product_colors.data.length-1)?'':','} </span>
                                                ))}
                                                </>
                                            )
                                            :""
                                        }
                                        
                                        {/* <label>Warna Product<span className="required">*</span></label>
                                        <div className="select-box" placeholder="Pilih Warna">
                                            <select className="form-select"
                                                name="product_color"
                                                onInput={(e) => {
                                                    setFormValue({
                                                        ...formValue,
                                                        product_color: e.target.value.toString()
                                                    })
                                                }}
                                            >
                                                <option value="0">- Pilih Product Color -</option>
                                                {detailproduct.Product_colors.data.map((option) => (
                                                    <option value={option.attributes.Color}>{option.attributes.Color}</option>
                                                ))}
                                            </select>
                                        </div> */}

                                        <br />

                                        {/* <button type="submit">Add to Cart</button> */}
{/* 
                                        <a  className="add-to-wishlist-btn" title="Add to Wishlist">
                                            <Icon.Heart />
                                        </a> */}
                                    </form>

                                    {/* <div className="custom-payment-options">
                                        <span>Metode Pembayaran : </span>

                                        <div className="payment-methods">
                                            <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
                                            <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
                                            <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
                                            <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
                                            <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
                                            <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
                                            <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
                                        </div>
                                    </div> */}

                                    {/* <div className="products-share-social">
                                        <span>Share:</span>

                                        <ul>
                                            <li>
                                                <a  className="facebook" target="_blank">
                                                    <Icon.Facebook />
                                                </a>
                                            </li>
                                            <li>
                                                <a  className="twitter" target="_blank">
                                                    <Icon.Twitter />
                                                </a>
                                            </li>
                                            <li>
                                                <a  className="instagram" target="_blank">
                                                    <Icon.Instagram />
                                                </a>
                                            </li>
                                        </ul>
                                    </div> */}
                                </div>
                            </div>

                            <div className="col-lg-12 col-md-12">
                                <div className="products-details-tabs">
                                    <Tabs>
                                        <TabList>
                                            <Tab>Deskripsi</Tab>
                                            {/* <Tab>Info Penting</Tab> */}
                                            {
                                                (detailproduct.Category.data && detailproduct.Category.data.attributes.Name == "Unit")
                                                ? <Tab>Spesifikasi</Tab>
                                                : ""
                                            }
                                            {/* <Tab>Review</Tab> */}
                                        </TabList>

                                        <TabPanel>
                                            <div className="products-description" align="left">
                                                <p>{util.htmlParse(detailproduct.Description)}</p>
                                            </div>
                                        </TabPanel>

                                        {/* <TabPanel>
                                            <div className="products-description" align="left">
                                                <p>
                                                    <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
                                                    <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>

                                                    <p><b>Harga</b></p>
                                                    <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>

                                                    <p><b>Dokumen</b></p>
                                                    <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>

                                                    <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
                                                </p>
                                            </div>
                                        </TabPanel> */}

                                        <TabPanel>
                                            <div className="products-description">
                                                <ul className="additional-information">
                                                    <h2>Spesifikasi Mesin</h2>
                                                    {util.htmlParse(detailproduct.Machine)}<br /><br />

                                                    <h2>Spesifikasi Dimensi</h2>
                                                    {util.htmlParse(detailproduct.Dimension)}<br /><br />

                                                    <h2>Spesifikasi Rangka</h2>
                                                    {util.htmlParse(detailproduct.Structure)}<br /><br />

                                                    <h2>Spesifikasi Kelistrikan</h2>
                                                    {util.htmlParse(detailproduct.Voltage)}<br /><br />
                                                </ul>
                                            </div>
                                        </TabPanel>

                                        {/* <TabPanel>
                                            <div className="products-reviews">
                                                <h3>Customer Reviews</h3>
                                                <p>There are no reviews yet.</p>

                                                <form className="review-form">
                                                    <p>Rate this item:</p>

                                                    <div className="star-rating">
                                                        <i className='bx bxs-star'></i>
                                                        <i className='bx bxs-star'></i>
                                                        <i className='bx bxs-star'></i>
                                                        <i className='bx bxs-star'></i>
                                                        <i className='bx bxs-star'></i>

                                                        <p>Very good product!</p>
                                                    </div>

                                                    <div className="row">
                                                        <div className="col-lg-12">
                                                            <div className="form-group">
                                                                <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
                                                            </div>
                                                        </div>

                                                        <div className="col-lg-6 col-md-6">
                                                            <div className="form-group">
                                                                <input type="text" placeholder="Name*" className="form-control" />
                                                            </div>
                                                        </div>

                                                        <div className="col-lg-6 col-md-6">
                                                            <div className="form-group">
                                                                <input type="email" placeholder="Email*" className="form-control" />
                                                            </div>
                                                        </div>

                                                        <div className="col-lg-12 col-md-12">
                                                            <button type="submit" className="btn btn-primary">Submit</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </TabPanel> */}
                                    </Tabs>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </>
    )
}

export default ProductDetails;