import ComponentLoader from "../ComponentLoader/ComponentLoader";
import ErrorMessage from "../ErrorMessage/ErrorMessage";
import Icon, { SizeProp } from "../Icon/Icon";
import Item from "./Item";
import IconProp from "../../../Types/Icon/IconProp";
import React from "react";
const OrderedStatesList = (props) => {
    if (props.isLoading) {
        return React.createElement(ComponentLoader, null);
    }
    if (props.error) {
        return (React.createElement(ErrorMessage, { message: props.error, onRefreshClick: props.onRefreshClick }));
    }
    if (props.data.length === 0) {
        return (React.createElement("div", { className: "text-center" },
            !props.onCreateNewItem && (React.createElement(ErrorMessage, { message: props.noItemsMessage
                    ? props.noItemsMessage
                    : `No ${props.singularLabel.toLocaleLowerCase()}`, onRefreshClick: props.onRefreshClick })),
            props.onCreateNewItem && (React.createElement("div", { className: "my-10" },
                React.createElement("div", { className: "m-auto inline-flex items-center cursor-pointer text-gray-400 hover:bg-gray-50 border hover:text-gray-600 rounded-full border-gray-300 p-5", onClick: () => {
                        if (props.onCreateNewItem) {
                            props.onCreateNewItem(1);
                        }
                    } },
                    React.createElement(Icon, { icon: IconProp.Add, className: "h-5 w-5" }),
                    React.createElement("span", { className: "text-sm ml-2" },
                        "Add New ",
                        props.singularLabel))))));
    }
    return (React.createElement("div", { className: "m-32 text-center" },
        props.error && React.createElement("p", null, props.error),
        !props.error &&
            props.data &&
            props.data.length > 0 &&
            props.data.map((item, i) => {
                const isEnd = !(i + 1 < props.data.length);
                const isBeginning = !(i === 0);
                return (React.createElement("div", { key: i, id: props.id, className: "items-center w-fit m-auto" },
                    props.onCreateNewItem &&
                        isBeginning &&
                        props.shouldAddItemInTheBeginning && (React.createElement("div", { className: "text-center" },
                        React.createElement("div", { className: "m-auto rounded-full items-center cursor-pointer text-gray-400 hover:bg-gray-50 hover:text-gray-600 items-center border border-gray-300 p-5 w-fit", onClick: () => {
                                if (props.onCreateNewItem) {
                                    props.onCreateNewItem(item[props.orderField]
                                        ? item[props.orderField] + 1
                                        : 0);
                                }
                            } },
                            React.createElement("div", { className: "flex text-center" },
                                React.createElement(Icon, { icon: IconProp.Add, className: "m-auto h-5 w-5" }),
                                " ",
                                React.createElement("span", { className: "text-sm ml-2" }, "Add New Item"))),
                        React.createElement("div", { className: "items-center m-10 " },
                            React.createElement(Icon, { icon: IconProp.ChevronDown, size: SizeProp.Regular, className: "m-auto h-5 w-5 text-gray-500" })))),
                    React.createElement(Item, { item: item, titleField: props.titleField, descriptionField: props.descriptionField, actionButtons: props.actionButtons, getTitleElement: props.getTitleElement, getDescriptionElement: props.getDescriptionElement }),
                    ((isEnd && props.shouldAddItemInTheEnd) || !isEnd) && (React.createElement("div", { className: "vertical-list items-center m-10 " },
                        React.createElement(Icon, { icon: IconProp.ChevronDown, size: SizeProp.Regular, className: "m-auto h-5 w-5 text-gray-500" }))),
                    props.onCreateNewItem &&
                        ((isEnd && props.shouldAddItemInTheEnd) || !isEnd) && (React.createElement("div", { className: "text-center" },
                        React.createElement("div", { className: "m-auto items-center cursor-pointer text-gray-400 hover:bg-gray-50 border hover:text-gray-600 rounded-full border-gray-300 p-5 w-fit", onClick: () => {
                                if (props.onCreateNewItem) {
                                    props.onCreateNewItem(item[props.orderField]
                                        ? item[props.orderField] + 1
                                        : 0);
                                }
                            } },
                            React.createElement("div", { className: "flex items-center " },
                                React.createElement(Icon, { icon: IconProp.Add, className: "m-auto h-5 w-5" }),
                                " ",
                                React.createElement("span", { className: "text-sm ml-2" }, "Add New Item"))),
                        !isEnd && (React.createElement("div", { className: "items-center m-10" },
                            React.createElement(Icon, { icon: IconProp.ChevronDown, size: SizeProp.Larger, className: "m-auto h-5 w-5 text-gray-500" })))))));
            })));
};
export default OrderedStatesList;
//# sourceMappingURL=OrderedStatesList.js.map