import Analytics from "../../Utils/Analytics";
import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
import ErrorMessage from "../ErrorMessage/ErrorMessage";
import PageLoader from "../Loader/PageLoader";
import LabelElement from "../Label/Label";
import useTranslateValue from "../../Utils/Translation";
import React, { useEffect } from "react";
const Page = (props) => {
    const { translateString } = useTranslateValue();
    const translatedTitle = translateString(props.title);
    useEffect(() => {
        if (props.breadcrumbLinks && props.breadcrumbLinks.length > 0) {
            Analytics.capture("Page View: " +
                props.breadcrumbLinks
                    .map((link) => {
                    return link.title;
                })
                    .join(" > ")
                    .toString() || "");
        }
    }, [props.breadcrumbLinks]);
    if (props.error) {
        return React.createElement(ErrorMessage, { message: props.error });
    }
    return (React.createElement("div", { className: props.className ||
            "mb-auto max-w-full px-4 sm:px-6 lg:px-8 mt-5 mb-20 h-max" },
        ((props.breadcrumbLinks && props.breadcrumbLinks.length > 0) ||
            props.title) && (React.createElement("div", { className: "mb-5" },
            props.breadcrumbLinks && props.breadcrumbLinks.length > 0 && (React.createElement("div", { className: "mt-2" },
                React.createElement(Breadcrumbs, { links: props.breadcrumbLinks }))),
            props.title && (React.createElement("div", { className: "mt-2" },
                React.createElement("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:flex-wrap sm:gap-4" },
                    React.createElement("div", { className: "flex flex-col gap-1 min-w-0" },
                        React.createElement("h1", { className: "text-xl font-semibold leading-7 text-gray-900 sm:text-xl sm:tracking-tight sm:truncate" }, translatedTitle)),
                    props.headerRight && (React.createElement("div", { className: "flex flex-wrap items-center sm:justify-end gap-3" }, props.headerRight)),
                    props.labels && props.labels.length > 0 && (React.createElement("div", { className: "hidden sm:flex sm:flex-wrap sm:items-center sm:justify-end sm:gap-3" },
                        React.createElement("span", { className: "text-xs font-semibold uppercase tracking-wide text-gray-500 whitespace-nowrap" }, translateString("Labels") || "Labels"),
                        React.createElement("div", { className: "flex flex-wrap items-center gap-2 justify-end" }, props.labels
                            .filter((label) => {
                            return Boolean(label && (label.name || label.slug));
                        })
                            .map((label, index) => {
                            var _a;
                            return (React.createElement(LabelElement, { key: ((_a = label.id) === null || _a === void 0 ? void 0 : _a.toString()) ||
                                    label._id ||
                                    label.slug ||
                                    `${label.name || "label"}-${index}`, label: label }));
                        }))))))))),
        props.sideMenu && (React.createElement("main", { className: "mx-auto max-w-full pb-10" },
            React.createElement("div", { className: "flex flex-col md:flex-row md:gap-4 lg:gap-5" },
                props.sideMenu,
                !props.isLoading && (React.createElement("div", { className: "space-y-6 flex-1 min-w-0" }, props.children)),
                props.isLoading && (React.createElement("div", { className: "flex-1 min-w-0" },
                    React.createElement(PageLoader, { isVisible: true })))))),
        !props.sideMenu && !props.isLoading && props.children,
        !props.sideMenu && props.isLoading && React.createElement(PageLoader, { isVisible: true })));
};
export default Page;
//# sourceMappingURL=Page.js.map