import React, { useCallback, useEffect, useMemo, useState } from 'react';
import classnames from 'classnames';
import i18n from 'ui-i18n';
import ErrorIcon from '@mui/icons-material/Warning';
import WarningIcon from '@mui/icons-material/Error';
import { splitErrorsBySeverity } from '@reltio/mdm-sdk';
import { useCachedErrors } from './useCachedErrors';
import { ErrorsPanel } from './components/ErrorsPanel';
import { AttributeErrorItem } from './components/Error';
import { useStyles } from './styles';
export var AttributesErrorsPanel = function (_a) {
    var _b = _a.attributesWithErrors, attributesWithErrors = _b === void 0 ? [] : _b, _c = _a.alwaysShowLink, alwaysShowLink = _c === void 0 ? false : _c;
    var styles = useStyles();
    var cachedErrors = useCachedErrors(attributesWithErrors);
    var _d = useMemo(function () { return splitErrorsBySeverity(cachedErrors); }, [cachedErrors]), errors = _d[0], warnings = _d[1];
    var _e = useState(null), expandedPanelId = _e[0], setExpandedPanelId = _e[1];
    var panels = useMemo(function () {
        return [
            {
                id: 'errors',
                title: i18n.text('${number} ${errors}', {
                    number: errors.length,
                    errors: errors.length === 1 ? i18n.text('error') : i18n.text('errors')
                }),
                icon: React.createElement(ErrorIcon, { className: classnames(styles.icon, styles.errorIcon) }),
                items: errors,
                accordionClassName: styles.errorsAccordion,
                accordionDetailsClassName: styles.errorsAccordionDetails
            },
            {
                id: 'warnings',
                title: i18n.text('${number} ${warnings}', {
                    number: warnings.length,
                    warnings: warnings.length === 1 ? i18n.text('warning') : i18n.text('warnings')
                }),
                icon: React.createElement(WarningIcon, { className: classnames(styles.icon, styles.warningIcon) }),
                items: warnings,
                accordionClassName: styles.warningsAccordion,
                accordionDetailsClassName: styles.warningsAccordionDetails
            }
        ].filter(function (_a) {
            var items = _a.items;
            return items.length > 0;
        });
    }, [errors, warnings, styles]);
    useEffect(function () {
        setExpandedPanelId('errors');
    }, [errors]);
    var handleChange = useCallback(function (panelId) { return function (event, isExpanded) {
        setExpandedPanelId(isExpanded ? panelId : null);
    }; }, []);
    return panels.length > 0 ? (React.createElement(ErrorsPanel, { panels: panels, expandedPanelId: expandedPanelId, onToggle: handleChange, ErrorComponent: AttributeErrorItem, alwaysShowLink: alwaysShowLink })) : null;
};
