import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
import CheckboxElement from "../Checkbox/Checkbox";
import ColorInput from "../ColorViewer/ColorViewer";
import Icon, { ThickProp } from "../Icon/Icon";
import ConfirmModal from "../Modal/ConfirmModal";
import FieldType from "../Types/FieldType";
import OneUptimeDate from "../../../Types/Date";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useState, useEffect } from "react";
import { Draggable } from "react-beautiful-dnd";
import LongTextViewer from "../LongText/LongTextViewer";
const TableRow = (props) => {
    var _a;
    // Helper function to get nested property values using dot notation
    const getNestedValue = (obj, path) => {
        return path.split(".").reduce((current, key) => {
            return current === null || current === void 0 ? void 0 : current[key];
        }, obj);
    };
    const [isButtonLoading, setIsButtonLoading] = useState(((_a = props.actionButtons) === null || _a === void 0 ? void 0 : _a.map(() => {
        return false;
    })) || []);
    const [tooltipModalText, setTooltipModalText] = useState("");
    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) => {
        // Mobile view: render as a card
        if (props.isMobile) {
            return (React.createElement(React.Fragment, null,
                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: "p-4 bg-white border-b border-gray-200" }),
                    props.enableDragAndDrop ? (React.createElement("div", Object.assign({ className: "mb-3 flex justify-center" }, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps),
                        React.createElement(Icon, { icon: IconProp.ArrowUpDown, className: "h-4 w-4 text-gray-400" }))) : (React.createElement(React.Fragment, null)),
                    props.isBulkActionsEnabled ? (React.createElement("div", { className: "mb-3" },
                        React.createElement(CheckboxElement, { value: Boolean(props.isItemSelected), onChange: (value) => {
                                var _a, _b;
                                if (value) {
                                    (_a = props.onItemSelected) === null || _a === void 0 ? void 0 : _a.call(props, props.item);
                                }
                                else {
                                    (_b = props.onItemDeselected) === null || _b === void 0 ? void 0 : _b.call(props, props.item);
                                }
                            } }))) : (React.createElement(React.Fragment, null)),
                    React.createElement("div", { className: "space-y-3" }, props.columns.map((column, i) => {
                        var _a, _b;
                        if (column.type === FieldType.Actions) {
                            return (React.createElement("div", { key: i, className: "flex flex-wrap gap-2" },
                                error && (React.createElement(ConfirmModal, { title: `Error`, description: error, submitButtonText: "Close", onSubmit: () => {
                                        return setError("");
                                    } })), (_a = props.actionButtons) === null || _a === void 0 ? void 0 :
                                _a.map((button, actionIndex) => {
                                    if (button.isVisible &&
                                        !button.isVisible(props.item)) {
                                        return React.createElement("div", { key: actionIndex });
                                    }
                                    if (button.hideOnMobile) {
                                        return React.createElement("div", { key: actionIndex });
                                    }
                                    return (React.createElement(Button, { key: actionIndex, buttonSize: ButtonSize.Small, title: button.title, icon: button.icon, buttonStyle: button.buttonStyleType, isLoading: isButtonLoading[actionIndex], onClick: () => {
                                            if (button.onClick) {
                                                isButtonLoading[actionIndex] = true;
                                                setIsButtonLoading(isButtonLoading);
                                                button.onClick(props.item, () => {
                                                    isButtonLoading[actionIndex] = false;
                                                    setIsButtonLoading(isButtonLoading);
                                                }, (err) => {
                                                    isButtonLoading[actionIndex] = false;
                                                    setIsButtonLoading(isButtonLoading);
                                                    setError(err.message);
                                                });
                                            }
                                        } }));
                                })));
                        }
                        const value = column.key && !column.getElement ? (column.type === FieldType.Date ? (props.item[column.key] ? (OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.item[column.key], true)) : (column.noValueMessage || "")) : column.type === FieldType.DateTime ? (props.item[column.key] ? (OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.item[column.key], false)) : (column.noValueMessage || "")) : column.type === FieldType.USDCents ? (props.item[column.key] ? ((props.item[column.key] || 0) / 100 + " USD") : (column.noValueMessage || "0 USD")) : column.type === FieldType.Percent ? (props.item[column.key] ? (props.item[column.key] + "%") : (column.noValueMessage || "0%")) : column.type === FieldType.Color ? (props.item[column.key] ? (React.createElement(ColorInput, { value: props.item[column.key] })) : (column.noValueMessage || "0%")) : column.type === FieldType.LongText ? (props.item[column.key] ? (React.createElement(LongTextViewer, { text: props.item[column.key] })) : (column.noValueMessage || "")) : column.type === FieldType.Boolean ? (props.item[column.key] ? (React.createElement(Icon, { icon: IconProp.Check, className: "h-5 w-5 text-gray-500", thick: ThickProp.Thick })) : (React.createElement(Icon, { icon: IconProp.False, className: "h-5 w-5 text-gray-500", thick: ThickProp.Thick }))) : (((_b = getNestedValue(props.item, String(column.key))) === null || _b === void 0 ? void 0 : _b.toString()) ||
                            column.noValueMessage ||
                            "")) : column.key && column.getElement ? (column.getElement(props.item)) : null;
                        // Skip empty values for mobile view
                        if (!value ||
                            (typeof value === "string" && value.trim() === "")) {
                            return null;
                        }
                        return (React.createElement("div", { key: i, className: "flex flex-col space-y-1", onClick: () => {
                                if (column.tooltipText) {
                                    setTooltipModalText(column.tooltipText(props.item));
                                }
                            } },
                            React.createElement("div", { className: "text-sm font-medium text-gray-500" }, column.title),
                            React.createElement("div", { className: "text-sm text-gray-900" }, value)));
                    }))),
                tooltipModalText && (React.createElement(ConfirmModal, { title: `Help`, description: `${tooltipModalText}`, submitButtonText: "Close", onSubmit: () => {
                        setTooltipModalText("");
                    }, submitButtonType: ButtonStyleType.NORMAL }))));
        }
        // Desktop view: render as table row
        return (React.createElement(React.Fragment, null,
            React.createElement("tr", Object.assign({}, provided === null || provided === void 0 ? void 0 : provided.draggableProps, { ref: provided === null || provided === void 0 ? void 0 : provided.innerRef }),
                props.enableDragAndDrop && (React.createElement("td", Object.assign({ className: "ml-5 py-4 w-10 align-top" }, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps),
                    React.createElement(Icon, { icon: IconProp.ArrowUpDown, className: "ml-6 h-5 w-5 text-gray-500 hover:text-indigo-800 m-auto cursor-ns-resize" }))),
                props.isBulkActionsEnabled && (React.createElement("td", Object.assign({ className: "w-10 py-3.5  align-top" }, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps),
                    React.createElement("div", { className: "ml-5" },
                        React.createElement(CheckboxElement, { value: props.isItemSelected, onChange: (value) => {
                                if (value) {
                                    if (props.onItemSelected) {
                                        props.onItemSelected(props.item);
                                    }
                                }
                                else if (props.onItemDeselected) {
                                    props.onItemDeselected(props.item);
                                }
                            } })))),
                props.columns &&
                    props.columns
                        .filter((column) => {
                        return !(column.hideOnMobile && isMobile);
                    })
                        .map((column, i) => {
                        var _a, _b;
                        let className = "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
                        if (i === props.columns.length - 1) {
                            className =
                                "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
                        }
                        let columnContent = null;
                        if (column.key && !column.getElement) {
                            columnContent =
                                column.type === FieldType.Date ? (props.item[column.key] ? (OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.item[column.key], true)) : (column.noValueMessage || "")) : column.type === FieldType.DateTime ? (props.item[column.key] ? (OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.item[column.key], false)) : (column.noValueMessage || "")) : column.type === FieldType.USDCents ? (props.item[column.key] ? ((props.item[column.key] || 0) / 100 + " USD") : (column.noValueMessage || "0 USD")) : column.type === FieldType.Percent ? (props.item[column.key] ? (props.item[column.key] + "%") : (column.noValueMessage || "0%")) : column.type === FieldType.Color ? (props.item[column.key] ? (React.createElement(ColorInput, { value: props.item[column.key] })) : (column.noValueMessage || "0%")) : column.type === FieldType.LongText ? (props.item[column.key] ? (React.createElement(LongTextViewer, { text: props.item[column.key] })) : (column.noValueMessage || "")) : column.type === FieldType.Boolean ? (props.item[column.key] ? (React.createElement(Icon, { icon: IconProp.Check, className: "h-5 w-5 text-gray-500", thick: ThickProp.Thick })) : (React.createElement(Icon, { icon: IconProp.False, className: "h-5 w-5 text-gray-500", thick: ThickProp.Thick }))) : (((_a = getNestedValue(props.item, String(column.key))) === null || _a === void 0 ? void 0 : _a.toString()) ||
                                    column.noValueMessage ||
                                    "");
                        }
                        else if (column.key && column.getElement) {
                            columnContent = column.getElement(props.item);
                        }
                        const contentWrapperClassName = column.contentClassName
                            ? column.contentClassName
                            : "";
                        const actionsContainerClassName = column.contentClassName
                            ? `flex justify-end ${column.contentClassName}`
                            : "flex justify-end";
                        return (React.createElement("td", { key: i, className: className, style: {
                                textAlign: column.type === FieldType.Actions ? "right" : "left",
                            }, onClick: () => {
                                if (column.tooltipText) {
                                    setTooltipModalText(column.tooltipText(props.item));
                                }
                            } },
                            columnContent !== null && columnContent !== undefined && (React.createElement("div", { className: contentWrapperClassName }, columnContent)),
                            column.type === FieldType.Actions && (React.createElement("div", { className: actionsContainerClassName },
                                error && (React.createElement("div", { className: "text-align-left" },
                                    React.createElement(ConfirmModal, { title: `Error`, description: error, submitButtonText: "Close", onSubmit: () => {
                                            return setError("");
                                        } }))), (_b = props.actionButtons) === null || _b === void 0 ? void 0 :
                                _b.map((button, i) => {
                                    if (button.isVisible &&
                                        !button.isVisible(props.item)) {
                                        return React.createElement("div", { key: i });
                                    }
                                    // Hide button on mobile if hideOnMobile is true
                                    if (button.hideOnMobile && isMobile) {
                                        return React.createElement("div", { key: i });
                                    }
                                    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);
                                                    });
                                                }
                                            } })));
                                })))));
                    })),
            tooltipModalText && (React.createElement(ConfirmModal, { title: `Help`, description: `${tooltipModalText}`, submitButtonText: "Close", onSubmit: () => {
                    setTooltipModalText("");
                }, submitButtonType: ButtonStyleType.NORMAL }))));
    };
    if (props.enableDragAndDrop &&
        props.dragDropIdField &&
        props.dragDropIndexField) {
        return (React.createElement(Draggable, { draggableId: props.item[props.dragDropIdField] || "", index: props.item[props.dragDropIndexField] || 0, key: props.item[props.dragDropIndexField] || 0 }, (provided) => {
            return getRow(provided);
        }));
    }
    return getRow();
};
export default TableRow;
//# sourceMappingURL=TableRow.js.map