"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Changelog = void 0;
const tslib_1 = require("tslib");
const ui_kit_1 = require("@stoplight/ui-kit");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const React = tslib_1.__importStar(require("react"));
exports.Changelog = React.memo(({ className, padding, changes }) => {
    if (!changes || !changes.length) {
        return (React.createElement("div", { className: classnames_1.default(className, ui_kit_1.Classes.TEXT_MUTED, padding && `p-${padding}`) }, "No changes for this resource."));
    }
    const sortedChanges = lodash_1.orderBy(changes, [
        change => {
            return new Date(change.createdAt).getTime();
        },
    ], ['desc']);
    const groups = lodash_1.groupBy(sortedChanges, change => {
        return new Date(change.createdAt).toDateString();
    });
    return (React.createElement("div", { className: classnames_1.default('Changelog', className, padding && `p-${padding}`) }, Object.keys(groups).map((date, index) => {
        return (React.createElement("div", { key: date, className: classnames_1.default({ 'mt-6': index > 0 }) },
            React.createElement("div", { className: "p-2 font-medium Changelog__date" }, date),
            groups[date].map((change, i) => (React.createElement("div", { key: i, className: classnames_1.default('Changelog__item', 'p-2 border-b border-gray-2 dark:border-lighten-3') },
                React.createElement("div", { className: "flex text-sm" },
                    React.createElement("div", { className: "flex-1 mr-3 Changelog__message" }, change.message),
                    React.createElement("div", { className: "font-semibold lowercase Changelog__semver" }, change.semver)))))));
    })));
});
//# sourceMappingURL=index.js.map