import React from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@local-logic/design-system";
import * as styles from "./styles";
import { useTracking } from "~/tracking";
import { useNeighborhoodMatch } from "~/sdks/NeighborhoodMatch/context";
import { useResponsiveBreakpoints } from "~/hooks/useResponsiveBreakpoints";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/NeighborhoodMatch/types";
export const PaginationButton = () => {
    const { t } = useTranslation("neighborhoodMatch");
    const tracking = useTracking();
    const { limit, minimumLimit, hasMore, viewLess, viewMore } = useNeighborhoodMatch();
    const breakpoints = useResponsiveBreakpoints();
    const handleClick = () => {
        if (hasMore) {
            tracking.postEvent({
                eventType: TrackingPipelineEvents.PAGINATION_CLICKED,
                eventAttributes: [
                    {
                        label: "pagination_action_type",
                        data: "view_more",
                    },
                ],
            });
            tracking.trackAnalyticsEvent({
                eventName: AnalyticsEvents.PAGINATION_CLICKED,
                eventAttributes: {
                    ll_pagination_action_type: "view_more",
                },
            });
            viewMore();
        }
        if (!hasMore && limit > minimumLimit) {
            tracking.postEvent({
                eventType: TrackingPipelineEvents.PAGINATION_CLICKED,
                eventAttributes: [
                    {
                        label: "pagination_action_type",
                        data: "view_less",
                    },
                ],
            });
            tracking.trackAnalyticsEvent({
                eventName: AnalyticsEvents.PAGINATION_CLICKED,
                eventAttributes: {
                    ll_pagination_action_type: "view_less",
                },
            });
            viewLess();
        }
    };
    if (!(breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.lg) || (!hasMore && limit === minimumLimit)) {
        return null;
    }
    return (React.createElement("div", { className: styles.container },
        React.createElement(Button, { variant: "secondary", onClick: handleClick },
            hasMore && t("pagination.next"),
            !hasMore && limit > minimumLimit && t("pagination.previous"))));
};
//# sourceMappingURL=index.js.map