import React, { useState } from "react";
import Image from "../Image/Image";
import Route from "../../../Types/API/Route";
import BlankProfilePic from "../../Images/users/blank-profile.svg";
import UserUtil from "../../Utils/User";
import OneUptimeDate from "../../../Types/Date";
import Tooltip from "../Tooltip/Tooltip";
import MarkdownViewer from "../Markdown.tsx/MarkdownViewer";
import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
import ConfirmModal from "../Modal/ConfirmModal";
import Icon from "../Icon/Icon";
const FeedItem = (props) => {
    const [showMoreInformationModal, setShowMoreInformationModal] = useState(false);
    const getMoreInformationModal = () => {
        if (showMoreInformationModal) {
            return (React.createElement(ConfirmModal, { title: `More Information`, description: React.createElement("div", null,
                    React.createElement(MarkdownViewer, { text: props.moreTextInMarkdown || "" })), isLoading: false, submitButtonText: "Close", onSubmit: () => {
                    return setShowMoreInformationModal(false);
                }, submitButtonType: ButtonStyleType.NORMAL }));
        }
        return React.createElement(React.Fragment, null);
    };
    const getUserIcon = () => {
        var _a;
        const userImageRoute = ((_a = props.user) === null || _a === void 0 ? void 0 : _a.id)
            ? UserUtil.getProfilePictureRoute(props.user.id)
            : Route.fromString(`${BlankProfilePic}`);
        return (React.createElement("div", null,
            React.createElement(Image, { className: "flex size-10 items-center justify-center rounded-full bg-gray-400 ring-8 ring-white", imageUrl: userImageRoute }),
            props.icon && (React.createElement("span", { className: "absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px" },
                React.createElement(Icon, { className: "size-5 text-gray-500", icon: props.icon, color: props.color })))));
    };
    const getItem = () => {
        var _a, _b, _c;
        return (React.createElement("li", { key: props.key },
            React.createElement("div", { className: "relative pb-8" },
                !props.isLastItem && (React.createElement("span", { className: "absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200", "aria-hidden": "true" })),
                React.createElement("div", { className: "relative flex items-start space-x-3" },
                    React.createElement("div", { className: "relative" },
                        props.user && getUserIcon(),
                        !props.user && props.icon && getIconItem()),
                    React.createElement("div", { className: "min-w-0 flex-1" },
                        React.createElement("div", null,
                            ((_a = props.user) === null || _a === void 0 ? void 0 : _a.name) && (React.createElement("div", { className: "text-sm" },
                                React.createElement("div", { className: "font-medium text-gray-900" }, ((_c = (_b = props.user) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.toString()) || "Unknown User"))),
                            React.createElement("div", { className: "mt-0.5 text-sm text-gray-500 w-fit" },
                                React.createElement(Tooltip, { text: OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.itemDateTime) },
                                    React.createElement("div", { className: "w-fit" }, OneUptimeDate.fromNow(props.itemDateTime))))),
                        React.createElement("div", { className: "mt-2 text-sm text-gray-700" },
                            props.textInMarkdown && (React.createElement("div", null,
                                React.createElement(MarkdownViewer, { text: props.textInMarkdown }))),
                            props.element && React.createElement("div", null, props.element),
                            props.moreTextInMarkdown && (React.createElement("div", { className: "-ml-3 w-fit" },
                                React.createElement(Button, { onClick: () => {
                                        return setShowMoreInformationModal(true);
                                    }, title: "More Information", buttonStyle: ButtonStyleType.NORMAL, buttonSize: ButtonSize.Small }))))))),
            getMoreInformationModal()));
    };
    const getIconItem = () => {
        if (!props.icon) {
            return React.createElement(React.Fragment, null);
        }
        return (React.createElement("div", { className: "flex size-10 items-center justify-center rounded-full bg-gray-100 ring-10 ring-white" },
            React.createElement(Icon, { className: "size-5 text-gray-500", icon: props.icon, color: props.color })));
    };
    return getItem();
};
export default FeedItem;
//# sourceMappingURL=FeedItem.js.map