import React from 'react'
import * as Icon from 'react-feather'
import { useSelector } from 'react-redux'
import NumberFormat from 'react-number-format';
import Select from 'react-select';
import Router from 'next/router';
import Link from 'next/link';

const ProductCards = function ({ company,total,selected, product,pages,current, backend, user, ...props }) {
    // const products = useSelector((state) => state.products)
    // const handleName = values => {
    //     Router.push({
    //         pathname: '/yamaha/product/motor',
    //         query: (values&&values.length!=0)?{ filter: values["name"] }:{},
    //     })
    // }
    if(product&&product.length>0){
        const pagination = ()=>{
            var paging = [];
            for(var i=1;i<=pages;i++){
                paging.push(
                    <li key={`link_${i}`} className={`page-item ${i==current?'active':''}`}>
                            <Link href={`./?p=${i}`} ><a className="page-link">{i}</a></Link>
                    </li>
                );
            }
            return paging;
        };
        
        const Product = 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=${encodeURIComponent(data.attributes.Image.data[0].attributes.url)}`}
                            />
                            <ul>
                                <li>
                                <Link href={`/product/${data.id}`}>
                                    <a >
                                        <Icon.Search />
                                    </a>
                                </Link>
                                </li>
                                {/* <li>
                                    <a >
                                        <Icon.Heart />
                                    </a>
                                </li> */}
                                <li>
                                    <a onClick={function (evt) {
                                        evt.preventDefault();
                                        navigator.clipboard.writeText(evt.target.baseURI.substring(0,evt.target.baseURI.lastIndexOf('product/')+8)+`${data.id}`).then(() => {
                                         alert("a 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={`/product/${data.id}`}>
                                    <a>{data.attributes.Name}</a>
                                </Link>
                            </h3>
                            {
                                (data.attributes.Product_prices.data.length==0)
                                ?"-"
                                :(data.attributes.Product_prices.data.length==1)
                                    ?(<span><NumberFormat value={Math.min.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>)
                                    :(
                                        <span>
                                            <NumberFormat value={Math.min.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> 
                                        {"  s/d  "}
                                            <NumberFormat value={Math.max.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                        </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={`/product/${data.id}`}>
                                <a className="add-to-cart-btn">Detail Product</a>
                            </Link>
                        </div>
                    </div>
                </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-7 col-md-7 col-sm-7">
                                <div className="woocommerce-result-count">
                                    <p>Menampilkan {(current-1)*8+1}-{(current*8>total)?total:current*8} of {total} results</p>
                                </div>
                            </div>
    
                            <div className="col-lg-5 col-md-5 col-sm-5">
                                {/* <Select
                                    value={(selected) ? product.filter((i) => i.id == selected) : null}
                                    getOptionLabel={option => `${option.name}`}
                                    getOptionValue={option => option.id}
                                    options={product}
                                    isClearable="true"
                                    instanceId="name"
                                    placeholder="Cari Produk"
                                    onChange={values => handleName(values)}
                                /> */}
                            </div>
                        </div>
                    </div>
    
                    <div className="row justify-content-md">
    
                        {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">
                                        {(current!='1')?(<li className="page-item">
                                            <Link href={`./?p=${parseInt(current)-1}`} ><a className="page-link" >Prev</a></Link>
                                        </li>):""}
                                        {pagination()}
                                        {(current!=pages)?<li className="page-item">
                                            <Link href={`./?p=${parseInt(current)+1}`} ><a className="page-link" >Next</a></Link>
                                        </li>:""}
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    else{
        return (
            <div className="pt-80 pb-50 justify-content-center">
                <center><h5>Belum ada produk yang terdaftar untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
            </div>
        );
    }
}

export default ProductCards;