"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProfilesList = void 0;
var react_1 = __importStar(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var ramda_1 = require("ramda");
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var EntityTypeBadge_1 = require("../EntityTypeBadge");
var EntityUriLink_1 = require("../EntityUriLink");
var EntityAvatar_1 = require("../EntityAvatar");
var helpers_1 = require("./helpers");
var useDidUpdateEffect_1 = require("../hooks/useDidUpdateEffect");
var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
var types_1 = require("../types");
var styles_1 = require("./styles");
var SECOND_SCROLL_PAUSE = 1000;
var ProfilesList = function (_a) {
    var entities = _a.entities, entityToHighlight = _a.entityToHighlight, selectedEntityUri = _a.selectedEntityUri, onEntityClick = _a.onEntityClick, onEntityHover = _a.onEntityHover, entitiesImportStatus = _a.entitiesImportStatus, entityButtonsRenderer = _a.entityButtonsRenderer;
    var styles = (0, styles_1.useStyles)();
    var list = (0, react_1.useRef)(null);
    var scrollTimer = (0, react_1.useRef)(null);
    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
    (0, useDidUpdateEffect_1.useDidUpdateEffect)(function () {
        var _a, _b;
        if (entityToHighlight) {
            var element_1 = (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-entity-uri='".concat(entityToHighlight, "']"));
            (0, helpers_1.clearScrollTimer)(scrollTimer.current);
            if ((element_1 === null || element_1 === void 0 ? void 0 : element_1.length) > 0) {
                var scrollableParent_1 = (_b = list.current) === null || _b === void 0 ? void 0 : _b.parentElement;
                if (!(0, helpers_1.isScrolledIntoView)(element_1[0], scrollableParent_1)) {
                    (0, helpers_1.scroll)(element_1[0]);
                    scrollTimer.current = setTimeout(function () {
                        if (!(0, helpers_1.isScrolledIntoView)(element_1[0], scrollableParent_1)) {
                            (0, helpers_1.scroll)(element_1[0]);
                        }
                    }, SECOND_SCROLL_PAUSE);
                }
            }
        }
        return function () {
            (0, helpers_1.clearScrollTimer)(scrollTimer.current);
        };
    }, [entityToHighlight]);
    return (react_1.default.createElement("div", { ref: list }, (entities || []).map(function (entity) {
        var _a;
        var label = (0, mdm_sdk_1.getLabel)(entity.label);
        var secondaryLabel = entity.secondaryLabel;
        var businessCardText = (0, mdm_sdk_1.getBusinessCardAttributesText)(metadata, entity);
        var isActive = (0, mdm_sdk_1.isActiveObject)(entity);
        var entityUri = entity.uri;
        var entityUriForLink = (0, mdm_sdk_1.getEntityUriForLink)(entity);
        var importStatus = (0, ramda_1.prop)(entityUri, entitiesImportStatus);
        return (react_1.default.createElement("div", { key: entityUri, className: (0, classnames_1.default)(styles.item, (_a = {},
                _a[styles.clickable] = !!onEntityClick,
                _a[styles.selected] = entityUri === selectedEntityUri,
                _a[styles.highlighted] = entityUri === entityToHighlight,
                _a[styles.inactive] = !isActive,
                _a[styles.justImported] = importStatus === types_1.ImportModes.Success,
                _a)), onClick: onEntityClick ? function () { return onEntityClick(entityUri); } : undefined, onMouseEnter: onEntityHover ? function () { return onEntityHover(entityUri); } : undefined, onMouseLeave: onEntityHover ? function () { return onEntityHover(null); } : undefined, "data-reltio-id": "profiles-list-item", "data-entity-uri": entityUri },
            react_1.default.createElement(EntityAvatar_1.EntityAvatar, { entity: entity, avatarClassName: styles.avatar, imageClassName: styles.image }),
            react_1.default.createElement("div", { className: styles.info },
                react_1.default.createElement("div", null,
                    react_1.default.createElement(EntityUriLink_1.EntityUriLink, { value: entityUriForLink, className: styles.label }, label),
                    secondaryLabel && react_1.default.createElement("span", { className: styles.secondaryLabel },
                        secondaryLabel,
                        " "),
                    businessCardText && react_1.default.createElement("span", { className: styles.businessCard }, businessCardText)),
                react_1.default.createElement("div", { className: styles.secondRow },
                    react_1.default.createElement(EntityTypeBadge_1.EntityTypeBadge, { entity: entity }),
                    react_1.default.createElement("div", null, (0, mdm_sdk_1.getEntityId)(entity)))),
            entityButtonsRenderer && entityButtonsRenderer(entity)));
    })));
};
exports.ProfilesList = ProfilesList;
