import Button, { ButtonStyleType } from "../Button/Button";
import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
import Typeof from "../../../Types/Typeof";
import React from "react";
import { DragDropContext, Draggable, Droppable, } from "react-beautiful-dnd";
const StaticModelList = (props) => {
    const getRow = (model, isSelected, provided) => {
        var _a;
        return (React.createElement("div", Object.assign({ onClick: () => {
                props.onClick(model);
            } }, provided === null || provided === void 0 ? void 0 : provided.draggableProps, { ref: provided === null || provided === void 0 ? void 0 : provided.innerRef, className: `cursor-pointer mt-2 mb-2 flex justify-between items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-offset-2 hover:border-gray-400 ${isSelected ? "ring ring-indigo-500" : ""}` }),
            React.createElement("div", { className: "flex" },
                props.enableDragAndDrop && (React.createElement("div", Object.assign({ className: "mr-5 mt-2 -ml-5 w-10" }, 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.customElement && (React.createElement("div", { className: "min-w-0 flex-1" },
                    React.createElement("div", { className: "focus:outline-none" },
                        props.headerField &&
                            typeof props.headerField === Typeof.String && (React.createElement("p", { className: "text-sm font-medium text-gray-300" }, model.getValue(props.headerField))),
                        props.headerField &&
                            typeof props.headerField === "function" &&
                            props.headerField(model),
                        React.createElement("p", { className: "text-sm font-medium text-gray-900" }, model.getValue(props.titleField)),
                        props.descriptionField && (React.createElement("p", { className: "truncate text-sm text-gray-500" }, model.getValue(props.descriptionField)))))), (_a = props.customElement) === null || _a === void 0 ? void 0 :
                _a.call(props, model)),
            props.onDelete && (React.createElement("div", null,
                React.createElement(Button, { icon: IconProp.Trash, buttonStyle: ButtonStyleType.OUTLINE, title: "Delete", onClick: () => {
                        var _a;
                        (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props, model);
                    } })))));
    };
    const getBody = (provided) => {
        return (React.createElement("div", Object.assign({ ref: provided === null || provided === void 0 ? void 0 : provided.innerRef }, provided === null || provided === void 0 ? void 0 : provided.droppableProps),
            props.list &&
                props.list.length > 0 &&
                props.list.map((model, i) => {
                    const isSelected = props.selectedItems.filter((selectedItem) => {
                        var _a, _b;
                        return ((_a = selectedItem._id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_b = model._id) === null || _b === void 0 ? void 0 : _b.toString());
                    }).length > 0;
                    if (props.enableDragAndDrop) {
                        return (React.createElement(Draggable, { draggableId: model[props.dragDropIdField || ""] ||
                                "", index: model[props.dragDropIndexField || 0] ||
                                0, key: model[props.dragDropIndexField || 0] ||
                                0 }, (provided) => {
                            return getRow(model, isSelected, provided);
                        }));
                    }
                    return React.createElement("div", { key: i }, getRow(model, isSelected));
                }), provided === null || provided === void 0 ? void 0 :
            provided.placeholder));
    };
    const getComponent = () => {
        if (props.enableDragAndDrop) {
            return (React.createElement(Droppable, { droppableId: props.dragAndDropScope || "" }, (provided) => {
                return getBody(provided);
            }));
        }
        return getBody();
    };
    return (React.createElement(DragDropContext, { onDragEnd: (result) => {
            var _a;
            if (((_a = result.destination) === null || _a === void 0 ? void 0 : _a.index) && props.onDragDrop) {
                props.onDragDrop(result.draggableId, result.destination.index);
            }
        } }, getComponent()));
};
export default StaticModelList;
//# sourceMappingURL=StaticModelList.js.map