import { PRODUCT_RANGE } from "~/constants";

export const useAppParams = () => {
    // state

    const route = useRoute();
    const { y } = useWindowScroll({ behavior: "smooth" });

    const slug = useRouteParams<string | undefined>("slug");

    const sort = useRouteQuery<string | undefined>("sort", undefined, {
        mode: "replace",
    });

    const search = useRouteQuery<string | undefined>("search", "", {
        mode: "replace",
    });

    const page = useRouteQuery("page", "1", {
        mode: "push",
        transform: {
            get: (v) => Number(v),
            set: (v: number) => String(v),
        },
    });

    const status = useRouteQuery<string | undefined>("status", undefined, {
        mode: "replace",
    });

    const price_gte = useRouteQuery<number | undefined>("price_gte", PRODUCT_RANGE.min, {
        mode: "replace",
    });

    const price_lte = useRouteQuery<number | undefined>("price_lte", PRODUCT_RANGE.max, {
        mode: "replace",
    });

    const in_stock = useRouteQuery("in_stock", "false", {
        mode: "replace",
        transform: {
            get: (v) => v === "true",
            set: (v: boolean) => (v ? "true" : "false"),
        },
    });

    const has_discount = useRouteQuery("has_discount", "false", {
        mode: "replace",
        transform: {
            get: (v) => v === "true",
            set: (v: boolean) => (v ? "true" : "false"),
        },
    });

    const tracking_code = useRouteQuery<string>("tracking_code", "", {
        mode: "replace",
    });

    watch(
        () => page.value,
        () => {
            if (route.name !== "product-id") {
                y.value = 0;
            }
        },
    );

    return {
        slug,
        sort,
        search,
        page,
        price_gte,
        price_lte,
        in_stock,
        status,
        has_discount,
        tracking_code,
    };
};