import Table from "../Table/Table";
import FieldType from "../Types/FieldType";
import SortOrder from "../../../Types/BaseDatabase/SortOrder";
import React, { useEffect, useState, } from "react";
const DictionaryOfStringsViewer = (props) => {
    const [data, setData] = useState([]);
    useEffect(() => {
        setData(Object.keys(props.value || {
            "": "",
        }).map((key) => {
            return {
                key: key,
                value: props.value[key] || "",
            };
        }) || [
            {
                key: "",
                value: "",
            },
        ]);
    }, [props.value]);
    if (data.length === 0) {
        return (React.createElement("div", { className: "text-gray-400 text-sm py-2" }, "No items to display."));
    }
    return (React.createElement(Table, { id: "dictionary-viewer-table", data: data, singularLabel: "Item", pluralLabel: "Items", isLoading: false, error: "", currentPageNumber: 1, totalItemsCount: data.length, itemsOnPage: data.length, disablePagination: true, noItemsMessage: "No items to display.", onNavigateToPage: () => { }, sortBy: null, sortOrder: SortOrder.Ascending, onSortChanged: () => { }, columns: [
            {
                title: "Key",
                type: FieldType.Element,
                key: "key",
                disableSort: true,
                getElement: (item) => {
                    return (React.createElement("span", { className: "font-mono font-medium text-gray-900" }, item.key));
                },
            },
            {
                title: "Value",
                type: FieldType.Element,
                key: "value",
                disableSort: true,
                getElement: (item) => {
                    return (React.createElement("span", { className: "font-mono text-gray-600" }, item.value || (React.createElement("span", { className: "text-gray-400 italic" }, "empty"))));
                },
            },
        ] }));
};
export default DictionaryOfStringsViewer;
//# sourceMappingURL=DictionaryOfStingsViewer.js.map