// react
import React, { useEffect } from "react";
// third-party
import classNames from "classnames";
import { useRouter } from "next/router";
// application
import BlockSpace from "~/components/blocks/BlockSpace";
import ProductsView from "~/components/shop/ProductsView";
import ShopSidebar from "~/components/shop/ShopSidebar";
import { buildQuery } from "~/store/shop/shopHelpers";
import { CurrentVehicleScopeProvider } from "~/services/current-vehicle";
import { SidebarProvider } from "~/services/sidebar";
import { useShop } from "~/store/shop/shopHooks";
import {
    IShopPageGridLayout,
    IShopPageLayout,
    IShopPageOffCanvasSidebar,
    IShopPageSidebarPosition,
} from "~/interfaces/pages";

interface Props {
    layout: IShopPageLayout;
    gridLayout: IShopPageGridLayout;
    sidebarPosition?: IShopPageSidebarPosition;
    queryObject: {
        filter_marca?: string;
        filter_modelo?: string;
    };
}

function ShopPageShop(props: Props) {
    const { layout, gridLayout, sidebarPosition = "start", queryObject } = props;
    const router = useRouter();
    const shopState = useShop();

    // Replace current url solo cuando los filtros o parámetros realmente cambien
    const lastQueryRef = React.useRef<string>("");
    useEffect(() => {
        if (!shopState.init) {
            return;
        }

        const query = buildQuery(shopState.options, shopState.filters, { slug: router.query.slug });
        if (query === lastQueryRef.current) {
            return;
        }
        lastQueryRef.current = query;

        router.replace({ pathname: router.pathname, query }, undefined, { shallow: true }).then();
    }, [shopState.options, shopState.filters, router.query.slug]);

    const hasSidebar = ["grid-3-sidebar", "grid-4-sidebar"].includes(gridLayout);
    const offCanvasSidebar: IShopPageOffCanvasSidebar = ["grid-4-full", "grid-5-full", "grid-6-full"].includes(
        gridLayout,
    )
        ? "always"
        : "mobile";

    if (shopState.categoryIsLoading || (shopState.productsListIsLoading && !shopState.productsList)) {
        return null;
    }

    const sidebar = <ShopSidebar offcanvas={offCanvasSidebar} />;

    const blockSplitClasses = classNames("block-split", {
        "block-split--has-sidebar": hasSidebar,
    });

    return (
        <React.Fragment>
            <SidebarProvider>
                <CurrentVehicleScopeProvider>
                    <div className={blockSplitClasses}>
                        <div className="container mt-4 pt-4" style={{ backgroundColor: "#FFF", borderRadius: "10px" }}>
                            <div className="block-split__row row no-gutters">
                                <div className="block-split__item block-split__item-content col-auto flex-grow-1">
                                    <div className="block">
                                        <ProductsView
                                            layout={layout}
                                            gridLayout={gridLayout}
                                            offCanvasSidebar={offCanvasSidebar}
                                        />
                                    </div>
                                </div>

                                                            {sidebarPosition === "end" && hasSidebar && (
                                    <div className="block-split__item block-split__item-sidebar col-auto">
                                        {sidebar}
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>

                    <BlockSpace layout="before-footer" />

                    <style jsx global>{`
                        /* Contenedor blanco - margin-top solo para PC */
                        .container.mt-4.pt-4 {
                            margin-top: 4.5rem !important;
                        }

                        @media (max-width: 767px) {
                            .container.mt-4.pt-4 {
                                margin-top: 1.5rem !important;
                            }
                        }
                    `}</style>
                </CurrentVehicleScopeProvider>
            </SidebarProvider>
        </React.Fragment>
    );
}

export default ShopPageShop;