import Button, { ButtonSize } from "../Button/Button";
import ConfirmModal from "../Modal/ConfirmModal";
import React, { useState, useEffect } from "react";
const Item = (props) => {
    var _a, _b;
    const [isButtonLoading, setIsButtonLoading] = useState(((_a = props.actionButtons) === null || _a === void 0 ? void 0 : _a.map(() => {
        return false;
    })) || []);
    const [error, setError] = useState("");
    // Track mobile view for responsive behavior
    const [isMobile, setIsMobile] = useState(false);
    useEffect(() => {
        const checkMobile = () => {
            setIsMobile(window.innerWidth < 768); // md breakpoint
        };
        checkMobile();
        window.addEventListener("resize", checkMobile);
        return () => {
            window.removeEventListener("resize", checkMobile);
        };
    }, []);
    return (React.createElement("div", { className: "text-center border border-gray-300 rounded p-10 space-y-4 w-fit" },
        error && (React.createElement(ConfirmModal, { title: `Error`, description: error, submitButtonText: "Close", onSubmit: () => {
                return setError("");
            } })),
        !props.getTitleElement && (React.createElement("div", null, props.item[props.titleField]
            ? props.item[props.titleField]
            : "")),
        props.getTitleElement && (React.createElement("div", { className: "justify-center flex" }, props.getTitleElement(props.item))),
        React.createElement("div", { className: "text-gray-500" },
            props.getDescriptionElement && (React.createElement("div", { className: "justify-center flex" }, props.getDescriptionElement(props.item))),
            !props.getDescriptionElement && (React.createElement("div", null, props.descriptionField && props.item[props.descriptionField]
                ? props.item[props.descriptionField]
                : ""))),
        React.createElement("div", { className: "flex justify-center" }, (_b = props.actionButtons) === null || _b === void 0 ? void 0 : _b.map((button, i) => {
            if (button.isVisible && !button.isVisible(props.item)) {
                return React.createElement(React.Fragment, null);
            }
            // Hide button on mobile if hideOnMobile is true
            if (button.hideOnMobile && isMobile) {
                return React.createElement(React.Fragment, null);
            }
            return (React.createElement("div", { key: i, className: "" },
                React.createElement(Button, { buttonSize: ButtonSize.Small, title: button.title, icon: button.icon, buttonStyle: button.buttonStyleType, isLoading: isButtonLoading[i], onClick: () => {
                        if (button.onClick) {
                            isButtonLoading[i] = true;
                            setIsButtonLoading(isButtonLoading);
                            button.onClick(props.item, () => {
                                // on action complete
                                isButtonLoading[i] = false;
                                setIsButtonLoading(isButtonLoading);
                            }, (err) => {
                                isButtonLoading[i] = false;
                                setIsButtonLoading(isButtonLoading);
                                setError(err.message);
                            });
                        }
                    } })));
        }))));
};
export default Item;
//# sourceMappingURL=Item.js.map