import Button, { ButtonSize } from "../Button/Button";
import Detail from "../Detail/Detail";
import Icon, { ThickProp } from "../Icon/Icon";
import ConfirmModal from "../Modal/ConfirmModal";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useState, useEffect } from "react";
import { Draggable } from "react-beautiful-dnd";
const ListRow = (props) => {
    var _a;
    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);
        };
    }, []);
    const getRow = (provided) => {
        var _a, _b, _c;
        return (React.createElement("div", Object.assign({}, provided === null || provided === void 0 ? void 0 : provided.draggableProps, { ref: provided === null || provided === void 0 ? void 0 : provided.innerRef, className: "bg-white px-4 py-6 shadow sm:rounded-lg sm:px-6" }),
            React.createElement("div", null,
                props.enableDragAndDrop && (React.createElement("div", { className: "flex" },
                    React.createElement("div", Object.assign({ className: "ml-0 -ml-2 w-10" }, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps),
                        React.createElement(Icon, { icon: IconProp.Drag, thick: ThickProp.Thick, className: " h-6 w-6 text-gray-500 hover:text-gray-700 m-auto cursor-ns-resize" })),
                    React.createElement(Detail, { item: props.item, fields: props.fields, showDetailsInNumberOfColumns: ((_a = props.listDetailOptions) === null || _a === void 0 ? void 0 : _a.showDetailsInNumberOfColumns) || 1 }))),
                !props.enableDragAndDrop && (React.createElement(Detail, { item: props.item, fields: props.fields, showDetailsInNumberOfColumns: ((_b = props.listDetailOptions) === null || _b === void 0 ? void 0 : _b.showDetailsInNumberOfColumns) || 1 }))),
            React.createElement("div", { className: props.enableDragAndDrop ? `flex mt-5 ml-5` : `flex mt-5 -ml-3` }, (_c = props.actionButtons) === null || _c === void 0 ? void 0 : _c.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 },
                    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);
                                });
                            }
                        } })));
            })),
            error && (React.createElement(ConfirmModal, { title: `Error`, description: error, submitButtonText: "Close", onSubmit: () => {
                    return setError("");
                } }))));
    };
    if (props.enableDragAndDrop &&
        props.dragDropIdField &&
        props.dragDropIndexField) {
        return (React.createElement(Draggable, { draggableId: props.item[props.dragDropIdField] || "", index: props.item[props.dragDropIndexField] || 0 }, (provided) => {
            return getRow(provided);
        }));
    }
    return getRow();
};
export default ListRow;
//# sourceMappingURL=ListRow.js.map