import React from 'react';
import Header from "@/components/Company/Header";
import Footer from "@/components/Company/Footer";
import PageBanner from '@/components/Common/PageBanner';
import SparepartList from '@/components/Common/new/SparepartList';

// import GetSparepart from "@/api/others/sparepart/sparepart.js";
import Products from "@/api/new/product";
import Company from "@/api/new/company";

import Cookies from "cookies";

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
import Router from 'next/router'

const queryClient = new QueryClient();
const handleName = values => {
    Router.push({
        pathname: '/yamaha/Product/Sparepart',
        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
    })
}

const Shop = function ({ companyData,company,icon,desc,sosmed,category,selected,page, products, backend, user, ...props }) {
    return (
        <QueryClientProvider client={queryClient}>
            <Header company={company} icon={icon} />

            <PageBanner pageTitle="Products" />

            <SparepartList
                company={company}
                page={page}
                products={products}
                selected={selected}
                category={category}
            />

            <Footer company={companyData} icon={icon} social={sosmed} info={desc}/>
        </QueryClientProvider>
    )
}

export default Shop;

export async function getServerSideProps(context) {
    var companyName = process.env.NEXT_PUBLIC_COMPANY;
    var page = context.query.p||1;
    var category = context.query.s||'ygp';
    var props = {};
    try{
        var res = await Company.companyByName(companyName);
        if (res["STATUS"] === 1) {
            props["icon"] = res["DATA"]["companies"].data[0].attributes.Icon.data.attributes.url;
            props["desc"] = res["DATA"]["companies"].data[0].attributes.Description;
            props["companyData"] =res["DATA"]["companies"].data[0].attributes;
            props["sosmed"] = res["DATA"]["companies"].data[0].attributes.Social_Medias.data;
        }
        var types = await Products.GetProductCategory();
        props["category"] = (types["STATUS"]==1 && types["DATA"]["productCategories"].data)?types["DATA"]["productCategories"].data.map((i)=>i.attributes.Name):["Helmet","Lube","Apparel",'Spare Part','Accessory'];
        props["category"] = props["category"].filter((i)=>i!='Unit');
        var products = await Products.GetProductOthers(res["DATA"]["companies"].data[0].id,props["category"],category,8,page); 
        if(products["STATUS"]==1){
           props["products"] =products["DATA"];
           props["category"] = props["category"].filter((i)=>{
               return (products["DATA"][i.replace(' ','_')].data&&products["DATA"][i.replace(' ','_')].data.length>0);
           });
       }
       props["page"] = page;
       props["selected"] = category;
       props["company"] = companyName;
    }catch(e){console.log(e)}
    return {
        props
    };
    // var ygp = [];
    // var yamalube = [];
    // var helmet = [];
    // var apparel = [];
    // var accessories = [];

    // var filter = context.query.filter||"";
    // var selected = "";

    // const backend = process.env.BACKEND_SERVER_URI;

    // var { req, resp } = context;
    // const cookies = new Cookies(req, resp);
    // var user = "";
    // var userObj = (await cookies.get("user"))
    //     ? JSON.parse(await cookies.get("user"))
    //     : null;
    // if (userObj) {
    //     let sessionId = userObj["partners_login_states"].filter(function (i) {
    //         return (
    //             i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA"
    //         );
    //     });
    //     if (sessionId.length != 0) user = userObj["username"];
    // }

    // var res = await GetSparepart.GetSparepartYGP(filter);
    // if (res["STATUS"] === 1) {
    //     ygp = res["DATA"]["ygParts"];
    //     if (filter !=""){
    //         selected = ygp.filter((i)=>i.name==filter);
    //     }
    // }

    // var res = await GetSparepart.GetSparepartYamalube(filter);
    // if (res["STATUS"] === 1) {
    //     yamalube = res["DATA"]["yamalubes"];
    //     if (filter !=""){
    //         selected = yamalube.filter((i)=>i.name==filter);
    //     }
    // }

    // var res = await GetSparepart.GetHelmet(filter);
    // if (res["STATUS"] === 1) {
    //     helmet = res["DATA"]["helmets"];
    //     if (filter !=""){
    //         selected = helmet.filter((i)=>i.name==filter);
    //     }
    // }

    // var res = await GetSparepart.GetApparel(filter);
    // if (res["STATUS"] === 1) {
    //     apparel = res["DATA"]["apparels"];
    //     if (filter !=""){
    //         selected = apparel.filter((i)=>i.name==filter);
    //     }
    // }

    // var res = await GetSparepart.GetAcc(filter);
    // if (res["STATUS"] === 1) {
    //     accessories = res["DATA"]["accessories"];
    //     if (filter !=""){
    //         selected = accessories.filter((i)=>i.name==filter);
    //     }
    // }

    // return {
    //     props: {
    //         selected,
    //         ygp,
    //         yamalube,
    //         helmet,
    //         apparel,
    //         accessories,
    //         backend,
    //         user,
    //     }, // will be passed to the page component as props
    // };
}