import React from 'react'
import Link from 'next/link'
import * as Icon from 'react-feather'
import { useSelector } from 'react-redux'
import AddToCartBtn from '@/components/others/Shop/AddToCartBtn'
import Select from 'react-select';
import Router from 'next/router'

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

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

const ProductCard = function ({ category,page,selected,products, ...props }) {
    const handleName = values => {
        Router.push({
            pathname: '/yamaha/Product/Sparepart',
            query: (values && values.length != 0) ? { filter: values["name"] } : {},
        })
    }

    category = category.map((i)=>i.replace(' ','_'));
    const pagination = (type,pages)=>{
        console.log(type,selected);
        var paging = [];
        var current = (selected==type)?page:1;
        for(var i=1;i<=pages;i++){
            paging.push(
                <Link key={i} href={{
                    query: { s:type,p: i },
                }}>
                    <li className={`page-item ${i==current?'active':''}`}>
                        <a className="page-link" >{i}</a>
                    </li>
                </Link>
            );
        }
        
        return (
            <div className="row justify-content-md-center">
                <div className="col-lg-12 col-md-12 col-sm-12">
                    <div className="pagination-area">
                        <nav aria-label="Page navigation">
                            <ul className="pagination justify-content-center">
                                {(current!='1')?(<li className="page-item"><Link href={{
                                        pathname: '/yamaha/product/Sparepart',
                                        query: { s:type,p: parseInt(current)-1 },
                                    }}>
                                    <a className="page-link" >Prev</a>
                                </Link></li>):""}
                                {paging}
                                {(current!=pages)?<li className="page-item"><Link href={{
                                    pathname: '/yamaha/product/Sparepart',
                                    query: { s:type,p: parseInt(current)+1 },
                                }}>
                                    <a className="page-link" >Next</a>
                                </Link></li>:""}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        );
    };

    const productGrid = function(product){
        if(product){
            return product.map((data) => {
                return (
                    <div className="col-lg-3 col-md-6 col-sm-6" key={product.id}>
                        <div className="single-products">
                            <div className="products-image">
                                <img src={`/api/util?img=${(data.attributes.Image.data)?encodeURIComponent(data.attributes.Image.data[0].attributes["url"]):''}`} />
                                <ul>
                                    <li>
                                        <a >
                                            <Icon.Search />
                                        </a>
                                    </li>
                                    <li>
                                    <a onClick={function (evt) {
                                        evt.preventDefault();
                                        console.log(evt);
                                        navigator.clipboard.writeText(evt.target.baseURI+`${data.id}`).then(() => {
                                         alert("Link produk berhasil di copy. Silakan share ke teman - teman anda.");
                                        }, () => {
                                            alert("Gagal men-copy link. Silakan mencopy link produk secara manual");
                                        });
                                    }}>
                                        <Icon.Link/>
                                    </a>
                                </li>
                                </ul>
                            </div>
        
                            <div className="products-content">
                                <h3>
                                    <Link href={"/yamaha/Product/Ygp_Detail?s=" + data.id}>
                                        <a>{data.name}</a>
                                    </Link>
                                </h3>
                                <span>
                                    <NumberFormat value={data.price1 - data.price1 * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                </span><br />
                                <span></span>
                                <span>
                                    <div className="products-details">
                                        <div className="price">
                                            <NumberFormat
                                                style={{ color: "#EB1928" }}
                                                displayType={'text'}
                                                prefix={'%'}
                                                decimalScale={2}
                                                value={data.discount * 100}
                                            />
                                            <NumberFormat value={data.price1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                        </div>
                                    </div>
                                </span>
                                <ul>
                                    <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>
        
                                <Link href={"/yamaha/Product/Ygp_Detail?s=" + data.id}>
                                    <a className="add-to-cart-btn">Detail Product</a>
                                </Link>
                            </div>
                        </div>
                    </div>
                );
            });
        }
        else return(
        <div className="pt-80 pb-50 justify-content-center">
            <center><h5>Belum ada produk untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
        </div>);
    }

    return (
        <div className="shop-area ptb-80">
            <div className="container">
                <div className="woocommerce-topbar">
                    <div className="row align-items-center">

                        {/* <div className="col-lg-5 col-md-5 col-sm-5">
                            <Select
                                value={(selected) ? ygp.filter((i) => i.id == selected) : null}
                                getOptionLabel={option => `${option.name}`}
                                getOptionValue={option => option.id}
                                options={ygp}
                                isSearchable
                                isMulti
                                isClearable
                                instanceId="name"
                                placeholder="Cari Produk"
                                onChange={values => handleName(values)}
                            />
                        </div> */}
                    </div>
                </div>

                <div width="fullwidth">
                    <div className="products-details-tabs">
                        <Tabs>
                            <TabList>
                                {category.map((i)=>{
                                    return (<Tab key={i}>{i.replace(/\_/g,' ')}</Tab>);
                                })}
                            </TabList>
                            {category.map((i)=>{
                                return (
                                    <TabPanel>
                                        <div className="col-lg-2 col-md-2 col-sm-2">
                                            <div className="woocommerce-result-count">
                                                <p>Showing {(((selected==i)?page:1)-1)*8+1}-{(((selected==i)?page:1)*8>products[i].meta.pagination.total)?products[i].meta.pagination.total:((selected==i)?page:1)*8} of {products[i].meta.pagination.total} results</p>
                                            </div>
                                        </div>
                                        <div className="row justify-content-md">
                                            {productGrid(products[i].data)}
                                            {pagination(i.toLowerCase(),(products[i].meta)?products[i].meta.pagination.pageCount:1)}
                                        </div>
                                    </TabPanel>
                                );
                            })}    
                            {/* <TabPanel>
                                <div className="row justify-content-md">
                                    {YGP}
                                    {pagination('ygp',ygp.meta.pagination.pageCount)}
                                </div>
                            </TabPanel>
                            <TabPanel>
                                <div className="row justify-content-md">
                                    {Yamalube}
                                    {pagination('lube',yamalube.meta.pagination.pageCount)}
                                </div>
                            </TabPanel>
                            <TabPanel>
                                <div className="row justify-content-md">
                                    {Helmet}
                                    {pagination('helmet',helmet.meta.pagination.pageCount)}
                                </div>
                            </TabPanel>
                            <TabPanel>
                                <div className="row justify-content-md">
                                    {Apparel}
                                    {pagination('apparel',apparel.meta.pagination.pageCount)}
                                </div>
                            </TabPanel>
                            <TabPanel>
                                <div className="row justify-content-md">
                                    {Accessories}
                                    {pagination('accessories',accessories.meta.pagination.pageCount)}
                                </div>
                            </TabPanel> */}
                        </Tabs>
                    </div>
                </div>

                {/* <div className="row justify-content-md-center">
                    
                    {Product}

                    Pagination
                    <div className="col-lg-12 col-md-12 col-sm-12">
                        <div className="pagination-area">
                            <nav aria-label="Page navigation">
                                <ul className="pagination justify-content-center">
                                    <li className="page-item"><a className="page-link" >Prev</a></li>

                                    <li className="page-item active"><a className="page-link" >1</a></li>

                                    <li className="page-item"><a className="page-link" >2</a></li>

                                    <li className="page-item"><a className="page-link" >3</a></li>

                                    <li className="page-item"><a className="page-link" >Next</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div> */}
            </div>
        </div>
    )
}

export default ProductCard;