// react
import React from "react";
// application
import getShopPageData from "~/store/shop/shopHelpers";
import ShopPageShop from "~/components/shop/ShopPageShop";
import ShopPageCategory from "~/components/shop/ShopPageCategory";
import { wrapper } from "~/store/store";
import queryString from "query-string";

export const getServerSideProps = wrapper.getServerSideProps((store) => async (context) => {
    await getShopPageData(store, context);

    const query =
        typeof context.req.url === "string" ? queryString.stringify(queryString.parseUrl(context.req.url).query) : "";
    const queryObject = queryString.parse(query);

    const hasVehicleFilters = !!(queryObject.filter_marca || queryObject.filter_modelo);

    return {
        props: {
            hasVehicleFilters,
            subcategories: [],
            queryObject,
        },
    };
});

interface Props {
    hasVehicleFilters: boolean;
    subcategories: any[];
    queryObject: {
        filter_marca?: string;
        filter_modelo?: string;
    };
}

function Page(props: Props) {
    const { hasVehicleFilters, subcategories, queryObject } = props;

    // Contenido que entra desde abajo (mismo efecto que las cards de /models)
    return (
        <>
            <div className="catalog-page-slide-up">
                {hasVehicleFilters ? (
                    <ShopPageShop
                        layout="grid"
                        gridLayout="grid-4-sidebar"
                        sidebarPosition="start"
                        queryObject={queryObject}
                    />
                ) : (
                    <ShopPageCategory
                        layout="columns-4-sidebar"
                        category={null}
                        subcategories={subcategories}
                    />
                )}


            </div>

            <style jsx global>{`
                .catalog-page-slide-up {
                    animation: catalog-slide-up 0.5s ease-out both;
                }
                @keyframes catalog-slide-up {
                    from {
                        opacity: 0;
                        transform: translateY(40px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            `}</style>
        </>
    );
}

export default Page;