import React, { useEffect } from 'react';
import { eqCrosswalks } from '@reltio/mdm-sdk';
import { useHighlightedCrosswalks } from '../../../contexts/CrosswalksDisplayContext';
import { DummyCrosswalkRow } from '../DummyCrosswalkRow';
import { CrosswalkRow } from '../CrosswalkRow';
import { ShowDependentLink } from '../ShowDependentLink';
import { CrosswalkType } from '../types';
export var SourceCrosswalksRow = function (_a) {
    var source = _a.source, crosswalksByTypes = _a.crosswalksByTypes, _b = _a.showCrosswalkColors, showCrosswalkColors = _b === void 0 ? true : _b, _c = _a.crosswalksFocusEnabled, crosswalksFocusEnabled = _c === void 0 ? true : _c, expanded = _a.expanded, disableEditCrosswalk = _a.disableEditCrosswalk, disableDeleteCrosswalk = _a.disableDeleteCrosswalk, onEdit = _a.onEdit, onDelete = _a.onDelete, onToggleExpanded = _a.onToggleExpanded;
    var highlightedCrosswalks = useHighlightedCrosswalks();
    useEffect(function () {
        if (!expanded &&
            crosswalksFocusEnabled &&
            crosswalksByTypes[CrosswalkType.Dependent].some(function (dependentCrosswalk) {
                return highlightedCrosswalks.some(eqCrosswalks(dependentCrosswalk));
            })) {
            onToggleExpanded();
        }
    }, [highlightedCrosswalks]);
    return (React.createElement(React.Fragment, null,
        crosswalksByTypes[CrosswalkType.Simple].length === 0 &&
            crosswalksByTypes[CrosswalkType.Empty].length === 0 && (React.createElement(DummyCrosswalkRow, { crosswalkType: source, focusable: crosswalksFocusEnabled })),
        crosswalksByTypes[CrosswalkType.Simple].map(function (crosswalk) { return (React.createElement(CrosswalkRow, { key: crosswalk.uri, crosswalk: crosswalk, focusable: crosswalksFocusEnabled, disableEdit: disableEditCrosswalk, disableDelete: disableDeleteCrosswalk, onDelete: onDelete, onEdit: onEdit, isColored: showCrosswalkColors })); }),
        crosswalksByTypes[CrosswalkType.Empty].map(function (crosswalk) { return (React.createElement(CrosswalkRow, { key: crosswalk.uri, crosswalk: crosswalk, focusable: crosswalksFocusEnabled, isEmpty: true, disableEdit: disableEditCrosswalk, disableDelete: disableDeleteCrosswalk, onDelete: onDelete, onEdit: onEdit, isColored: showCrosswalkColors })); }),
        expanded &&
            crosswalksByTypes[CrosswalkType.Dependent].map(function (crosswalk) { return (React.createElement(CrosswalkRow, { key: crosswalk.uri, crosswalk: crosswalk, isDependent: true, disableEdit: disableEditCrosswalk, disableDelete: disableDeleteCrosswalk, onDelete: onDelete, onEdit: onEdit, focusable: crosswalksFocusEnabled, isColored: showCrosswalkColors })); }),
        crosswalksByTypes[CrosswalkType.Dependent].length > 0 && (React.createElement(ShowDependentLink, { showMore: !expanded, onClick: function () { return onToggleExpanded(); } }))));
};
