import Button, { ButtonStyleType } from "../Button/Button";
import React from "react";
const TableColumnListComponent = (props) => {
    if (!props.items || props.items.length === 0) {
        return React.createElement("p", null, props.noItemsMessage);
    }
    const firstThreeItems = [];
    for (let i = 0; i < 3; i++) {
        if (props.items[i]) {
            firstThreeItems.push(props.items[i]);
        }
    }
    // remaining items
    const remainingItems = [];
    for (let i = 3; i < props.items.length; i++) {
        if (props.items[i]) {
            remainingItems.push(props.items[i]);
        }
    }
    const [showMoreItems, setShowMoreItems] = React.useState(false);
    return (React.createElement("div", { className: props.className },
        firstThreeItems.map((item, i) => {
            return React.createElement("div", { key: i }, props.getEachElement(item));
        }),
        showMoreItems ? (remainingItems.map((item, i) => {
            return React.createElement("div", { key: i }, props.getEachElement(item));
        })) : (React.createElement(React.Fragment, null)),
        remainingItems.length > 0 && !showMoreItems ? (React.createElement(Button, { className: "-ml-3", onClick: () => {
                return setShowMoreItems(true);
            }, title: `${remainingItems.length} ${props.moreText || "more"}`, buttonStyle: ButtonStyleType.SECONDARY_LINK })) : (React.createElement(React.Fragment, null)),
        showMoreItems ? (React.createElement(Button, { className: "-ml-3", onClick: () => {
                return setShowMoreItems(false);
            }, title: "Show less", buttonStyle: ButtonStyleType.SECONDARY_LINK })) : (React.createElement(React.Fragment, null))));
};
export default TableColumnListComponent;
//# sourceMappingURL=TableColumnListComponent.js.map