import Icon from "../Icon/Icon";
import Link from "../Link/Link";
import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
import Pill from "../Pill/Pill";
import EventAttachmentList from "../AttachmentList/EventAttachmentList";
import { VeryLightGray } from "../../../Types/BrandColors";
import OneUptimeDate from "../../../Types/Date";
import React from "react";
import { useTranslation } from "react-i18next";
export var TimelineItemType;
(function (TimelineItemType) {
    TimelineItemType["StateChange"] = "StateChange";
    TimelineItemType["Note"] = "Note";
})(TimelineItemType || (TimelineItemType = {}));
const EventItem = (props) => {
    var _a, _b, _c;
    const { t } = useTranslation();
    return (React.createElement("div", { className: "mt-5 mb-5 bg-white shadow rounded-xl border-gray-100 p-5" },
        React.createElement("div", null,
            React.createElement("div", { className: "flex space-x-1" },
                React.createElement("div", null,
                    React.createElement(Pill, { key: 1, text: props.eventType, color: props.eventTypeColor, isMinimal: true })),
                props.currentStatus && props.currentStatusColor && (React.createElement("div", null,
                    React.createElement(Pill, { key: 2, text: props.currentStatus, color: props.currentStatusColor, isMinimal: true }))),
                props.anotherStatus && props.anotherStatusColor && (React.createElement("div", null,
                    React.createElement(Pill, { key: 3, text: props.anotherStatus, color: props.anotherStatusColor, isMinimal: true })))),
            React.createElement("div", { className: "mt-5" },
                React.createElement("h2", { className: `active-event-box-body-title event-${props.eventType.toLowerCase()}-box-body-title`, style: {
                        fontSize: props.isDetailItem ? "20px" : "16px",
                    } }, props.eventTitle)),
            props.eventDescription && (React.createElement("div", { className: `mt-2 text-sm active-event-box-body-description event-${props.eventType.toLowerCase()}-box-body-description` },
                React.createElement(MarkdownViewer, { text: props.eventDescription || "" }))),
            props.eventAttachments && props.eventAttachments.length > 0 && (React.createElement(EventAttachmentList, { attachments: props.eventAttachments })),
            props.eventSecondDescription && (React.createElement("div", { className: "mt-3 text-gray-500 text-sm active-event-box-body-second-description" }, props.eventSecondDescription)),
            props.eventMiniDescription && (React.createElement("div", { className: "mt-3 text-gray-400 text-sm active-event-box-body-mini-description" }, props.eventMiniDescription)),
            props.labels && props.labels.length > 0 ? (React.createElement("div", { className: "flex space-x-1 mt-3 active-event-box-body-labels" }, props.labels.map((label, i) => {
                return (React.createElement("div", { key: i },
                    React.createElement(Pill, { text: label.name, color: label.color })));
            }))) : (React.createElement(React.Fragment, null))),
        React.createElement("div", null,
            props.eventResourcesAffected &&
                ((_a = props.eventResourcesAffected) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React.createElement("div", { className: "w-full border-t border-gray-200 mt-5 mb-5 -ml-5 -mr-5 -pr-5", style: { width: "calc(100% + 2.5em)" } })),
            props.eventResourcesAffected &&
                ((_b = props.eventResourcesAffected) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (React.createElement("div", { key: 0 },
                React.createElement("div", { className: "flex flex-wrap gap-y-4 space-x-1 active-event-box-body-reesources" },
                    React.createElement("div", { className: "text-sm text-gray-400 mr-3 mt-1" }, t("eventItem.affectedResources")), (_c = props.eventResourcesAffected) === null || _c === void 0 ? void 0 :
                    _c.map((item, i) => {
                        return (React.createElement(Pill, { key: i, text: item, color: VeryLightGray, style: {
                                backgroundColor: "#f3f4f6",
                                color: "#9ca3af",
                            } }));
                    })))) : (React.createElement(React.Fragment, null)),
            props.eventTimeline && props.eventTimeline.length > 0 && (React.createElement("div", { className: `w-full border-t border-gray-200 mt-5 -ml-5 ${props.eventTimeline && props.eventTimeline.length > 0
                    ? "mb-5"
                    : "mb-0"} -mr-5 -pr-5`, style: { width: "calc(100% + 2.5em)" } })),
            React.createElement("div", { className: "flow-root" },
                React.createElement("ul", { role: "list", className: "-mb-8" }, props.eventTimeline &&
                    props.eventTimeline.map((item, i) => {
                        var _a, _b;
                        if (item.type === TimelineItemType.StateChange) {
                            return (React.createElement("li", { key: i },
                                React.createElement("div", { className: "relative pb-8" },
                                    i !== props.eventTimeline.length - 1 && (React.createElement("span", { className: "absolute top-5 left-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", null,
                                            React.createElement("div", { className: "relative px-1" },
                                                React.createElement("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 ring-8 ring-white" },
                                                    React.createElement(Icon, { icon: item.icon, className: "h-5 w-5 text-gray-500", style: {
                                                            color: item.iconColor.toString(),
                                                        } })))),
                                        React.createElement("div", { className: "min-w-0 flex-1 py-0" },
                                            React.createElement("div", { className: "text-sm leading-8 text-gray-500" },
                                                React.createElement("span", { className: "mr-2" },
                                                    React.createElement("span", { className: "font-medium text-gray-900 mr-1" }, props.eventType),
                                                    t("eventItem.stateChangedTo")),
                                                React.createElement("span", { className: "mr-1" },
                                                    React.createElement(Pill, { text: item.stateDisplayName ||
                                                            ((_a = item.state) === null || _a === void 0 ? void 0 : _a.getColumnValue("name")), color: (_b = item.state) === null || _b === void 0 ? void 0 : _b.getColumnValue("color"), isMinimal: true }))),
                                            React.createElement("div", null,
                                                React.createElement("span", { className: "text-sm leading-8 text-gray-500 whitespace-nowrap" }, OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(item.date))))))));
                        }
                        if (item.type === TimelineItemType.Note) {
                            return (React.createElement("li", { key: i },
                                React.createElement("div", { className: "relative pb-8" },
                                    i !== props.eventTimeline.length - 1 && (React.createElement("span", { className: "absolute top-5 left-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 ${item.highlight
                                            ? "rounded-2xl border border-gray-200 bg-gray-50 px-4 py-4 shadow-sm"
                                            : ""}` },
                                        !item.highlight && (React.createElement("div", null,
                                            React.createElement("div", { className: "relative px-1" },
                                                React.createElement("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 ring-8 ring-white" },
                                                    React.createElement(Icon, { icon: item.icon, className: "h-5 w-5 text-gray-500", style: {
                                                            color: item.iconColor.toString(),
                                                        } }))))),
                                        React.createElement("div", { className: "min-w-0 flex-1" },
                                            React.createElement("div", null,
                                                React.createElement("div", { className: "text-sm" },
                                                    React.createElement("span", { className: `font-medium ${item.highlight
                                                            ? "text-base text-gray-900"
                                                            : "text-sm text-gray-900"}` }, item.title
                                                        ? item.title
                                                        : t("eventItem.updateTo", {
                                                            eventType: props.eventType,
                                                        }))),
                                                React.createElement("p", { className: "mt-0.5 text-sm text-gray-500" },
                                                    t("eventItem.postedOn"),
                                                    " ",
                                                    OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(item.date))),
                                            React.createElement("div", { className: "mt-2 text-sm text-gray-700" },
                                                React.createElement("p", null,
                                                    React.createElement(MarkdownViewer, { text: item.note || "" })),
                                                item.attachments &&
                                                    item.attachments.length > 0 && (React.createElement(EventAttachmentList, { attachments: item.attachments, variant: "inline", showHeader: false, showCount: false, className: "mt-3" }))))))));
                        }
                        return React.createElement(React.Fragment, null);
                    }))),
            props.eventViewRoute && (React.createElement("div", { className: "w-full border-t border-gray-200 mt-5 mb-5 -ml-5 -mr-5 -pr-5", style: { width: "calc(100% + 2.5em)" } })),
            React.createElement("div", { className: "active-event-box-body-timestamp mt-5 flex justify-end" }, props.eventViewRoute ? (React.createElement("span", null,
                React.createElement(Link, { className: "cursor-pointer text-gray-400 hover:text-gray-500 text-sm", to: props.eventViewRoute },
                    React.createElement(React.Fragment, null, t("eventItem.view", { eventType: props.eventType }))))) : (React.createElement(React.Fragment, null))))));
};
export default EventItem;
//# sourceMappingURL=EventItem.js.map