import React, { useMemo } from 'react';
import { useContextSelector } from '@fluentui/react-context-selector';
import { ChangeRequestEditorContext } from '../../contexts/ChangeRequestEditorContext';
import { AttributesErrorsPanel } from '../../../../AttributesErrorsPanel';
import styles from './DCRErrorsPanel.module.css';
export var DCRErrorsPanel = function () {
    var errors = useContextSelector(ChangeRequestEditorContext, function (context) { return context.getErrors(); });
    var validationErrors = useMemo(function () { return errors.map(function (error) { return error.error; }); }, [errors]);
    if (validationErrors.length === 0) {
        return null;
    }
    return (React.createElement("div", { className: styles.DCRErrorsPanel },
        React.createElement(AttributesErrorsPanel, { attributesWithErrors: validationErrors, alwaysShowLink: true })));
};
