import React from 'react';
import * as Icon from 'react-feather';

import {
    Accordion,
    AccordionItem,
    AccordionItemHeading,
    AccordionItemPanel,
    AccordionItemButton
} from 'react-accessible-accordion';

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

const CheckoutContent = function ({ backend, checkout_product, user, provinces, ...props }) {
    console.log(provinces);

    const [formValue, setFormValue] = React.useState({
        transaction_id: "",
        product_img: "",
        product_name: "",
        product_color: "",
        product_quantity: "",
        product_total: "",
    });

    return (
        <>
            <div className="checkout-area ptb-80">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12 col-md-12">
                            <div className="user-actions">
                                <Icon.Edit />
                                <span>Returning customer? <a href="#">Click here to login</a></span>
                            </div>
                        </div>
                    </div>

                    <form>
                        <div className="row">
                            <div className="col-lg-6 col-md-12">
                                <div className="billing-details">
                                    <h3 className="title">Alamat Pengiriman</h3>

                                    <div className="row">
                                        <div className="col-lg-6 col-md-6">
                                            <div className="form-group">
                                                <label>Nama Lengkap <span className="required">*</span></label>
                                                <input type="text" className="form-control" />
                                            </div>
                                        </div>

                                        <div className="col-lg-6 col-md-6">
                                            <div className="form-group">
                                                <label>Nomer Telpon <span className="required">*</span></label>
                                                <input type="text" className="form-control" />
                                            </div>
                                        </div>

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

                                        <div className="col-lg-6 col-md-6">
                                            <div className="form-group">
                                                <label>Kode Pos <span className="required">*</span></label>
                                                <input type="text" className="form-control" />
                                            </div>
                                        </div>

                                        <div className="col-lg-12 col-md-12">
                                            <div className="form-group">
                                                <label>Alamat Lengkap <span className="required">*</span></label>
                                                <textarea name="notes" id="notes" cols="30" rows="4" className="form-control"></textarea>
                                            </div>
                                        </div>

                                        <div className="col-lg-6 col-md-6">
                                            <div className="form-group">
                                                <label>Kelurahan / Desa <span className="required">*</span></label>
                                                <input type="text" className="form-control" />
                                            </div>
                                        </div>

                                        <div className="col-lg-6 col-md-6">
                                            <div className="form-group">
                                                <label>Kecamatan <span className="required">*</span></label>
                                                <input type="text" className="form-control" />
                                            </div>
                                        </div>

                                        <div className="col-lg-6 col-md-6">
                                            <div className="form-group">
                                                <label>Kabupaten / Kota <span className="required">*</span></label>
                                                <input type="text" className="form-control" />
                                            </div>
                                        </div>


                                        <div className="col-lg-6 col-md-6">
                                            <div className="form-group">
                                                <label>Provinsi <span className="required">*</span></label>

                                                <div className="select-box">
                                                    <select className="form-select">
                                                        {/* {provinces["provinsi"].map((option) => (
                                                            <option value={option.id}>{option.nama}</option>
                                                        ))} */}
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        {/* <div className="col-lg-12 col-md-12">
                                            <div className="form-check">
                                                <input type="checkbox" className="form-check-input" id="create-an-account" />
                                                <label className="form-check-label" htmlFor="create-an-account">Create an account?</label>
                                            </div>
                                        </div>

                                        <div className="col-lg-12 col-md-12">
                                            <div className="form-check">
                                                <input type="checkbox" className="form-check-input" id="ship-different-address" />
                                                <label className="form-check-label" htmlFor="ship-different-address">Ship to a different address?</label>
                                            </div>
                                        </div> */}

                                        <div className="col-lg-12 col-md-12">
                                            <div className="form-group">
                                                <textarea name="notes" id="notes" cols="30" rows="4" placeholder="Order Notes" className="form-control"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="col-lg-6 col-md-6">
                                <div className="order-details">
                                    <h3 className="title">Metode Pengiriman</h3>

                                    <div className="order-table table-responsive">
                                        <div className="services-details">
                                            <div className="services-details-desc">
                                                <div className="services-details-accordion">
                                                    <Accordion>
                                                        <AccordionItem uuid="a">
                                                            <AccordionItemHeading>
                                                                <AccordionItemButton>
                                                                    <span> JNE </span><br />
                                                                    <p style={{ marginLeft: "25px" }}>
                                                                        Akan diterima pada tanggal 13 - 16 Nov <br />
                                                                    </p>
                                                                </AccordionItemButton>
                                                            </AccordionItemHeading>
                                                            <AccordionItemPanel>
                                                                <p>Pilih Waktu Pengiriman</p>
                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
                                                                <span htmlFor="kantor"> Pengiriman Setiap Saat </span><br />
                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
                                                                <span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br />
                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
                                                            </AccordionItemPanel>
                                                        </AccordionItem>

                                                        <AccordionItem uuid="b">
                                                            <AccordionItemHeading>
                                                                <AccordionItemButton>
                                                                    <span> Kargo - JNE Trucking (JTR) </span><br />
                                                                    <p style={{ marginLeft: "25px" }}>
                                                                        Akan diterima pada tanggal 14 - 17 Nov <br />
                                                                    </p>
                                                                </AccordionItemButton>
                                                            </AccordionItemHeading>
                                                            <AccordionItemPanel>
                                                                <p>Pilih Waktu Pengiriman</p>
                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
                                                                <span htmlFor="kantor"> Pengiriman Setiap Saat </span><br />
                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
                                                                <span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br />
                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
                                                            </AccordionItemPanel>
                                                        </AccordionItem>

                                                        <AccordionItem uuid="c">
                                                            <AccordionItemHeading>
                                                                <AccordionItemButton>
                                                                    <span> Next Day </span><br />
                                                                    <p style={{ marginLeft: "25px" }}>
                                                                        Akan diterima pada tanggal 13 - 14 Nov <br />                                                                    </p>
                                                                </AccordionItemButton>
                                                            </AccordionItemHeading>
                                                            <AccordionItemPanel>
                                                                <p>Pilih Waktu Pengiriman</p>
                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
                                                                <span htmlFor="kantor"> Pengiriman Setiap Saat </span><br />
                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
                                                                <span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br />
                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
                                                            </AccordionItemPanel>
                                                        </AccordionItem>
                                                    </Accordion>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <br />
                                <div className="order-details">
                                    <h3 className="title">Pesanan Anda</h3>

                                    <div className="order-table table-responsive">
                                        <table className="table table-bordered">
                                            <thead align="center">
                                                <tr>
                                                    <th scope="col">Nama Produk</th>
                                                    <th scope="col">Jumlah</th>
                                                    <th scope="col">Total</th>
                                                </tr>
                                            </thead>

                                            <tbody align="center">
                                                {checkout_product.length ? checkout_product.map(data => (
                                                    <tr key={data.id}>
                                                        <td className="product-name">
                                                            <a>{data.product_name}</a>
                                                        </td>

                                                        <td className="product-name">
                                                            <a>{data.product_quantity} Unit</a>
                                                        </td>

                                                        <td className="product-total">
                                                            <span className="subtotal-amount">
                                                                <NumberFormat
                                                                    name="product_total"
                                                                    value={data.product_total}
                                                                    displayType={'text'} thousandSeparator={true}
                                                                    prefix={'Rp. '}
                                                                />
                                                            </span>
                                                        </td>
                                                    </tr>
                                                )) : (
                                                    <tr>
                                                        <td colSpan="5" className="text-center">Tidak Ada Product di Keranjang</td>
                                                    </tr>
                                                )}

                                            </tbody>
                                            <tbody align="center">
                                                <tr align="center">
                                                    <td className="order-subtotal">
                                                        <span>Cart Subtotal</span>
                                                    </td>

                                                    <td className="shipping-price">
                                                        <span></span>
                                                    </td>

                                                    <td className="order-subtotal-price">
                                                        <span className="order-subtotal-amount">$210.00</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td className="order-shipping">
                                                        <span>Shipping</span>
                                                    </td>

                                                    <td className="shipping-price">
                                                        <span></span>
                                                    </td>

                                                    <td className="shipping-price">
                                                        <span>$5.00</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td className="total-price">
                                                        <span>Order Total</span>
                                                    </td>

                                                    <td className="shipping-price">
                                                        <span></span>
                                                    </td>

                                                    <td className="product-subtotal">
                                                        <span className="subtotal-amount">$215.00</span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    {/* <div className="payment-method">
                                        <p>
                                            <input type="radio" id="direct-bank-transfer" name="radio-group" defaultChecked />
                                            <label htmlFor="direct-bank-transfer">Direct Bank Transfer</label>

                                            Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order will not be shipped until the funds have cleared in our account.
                                        </p>
                                        <p>
                                            <input type="radio" id="paypal" name="radio-group" />
                                            <label htmlFor="paypal">PayPal</label>
                                        </p>
                                        <p>
                                            <input type="radio" id="cash-on-delivery" name="radio-group" />
                                            <label htmlFor="cash-on-delivery">Cash on Delivery</label>
                                        </p>
                                    </div> */}

                                    <a href="#" className="btn btn-primary order-btn">Lanjutkan Pembayaran</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </>
    )
}

export default CheckoutContent;