import $i18n from '../../../../locales/i18n.js';
import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { CnButton, CnIcon } from '@cainiaofe/cn-ui';
import './toolbar-notification.scss';
const notificationConfig = {
    filter: {
        icon: 'filter',
        message: $i18n.get({
            id: 'YouAdjustedTheFilterConfiguratio_268414510',
            dm: '你调整了筛选配置',
        }),
    },
    sort: {
        icon: 'sort',
        message: $i18n.get({ id: 'YouAdjustedTheSortConfiguration', dm: '你调整了排序配置' }),
    },
    group: {
        icon: 'group',
        message: $i18n.get({
            id: 'YouAdjustedTheGroupingConfigurat_1141569657',
            dm: '你调整了分组配置',
        }),
    },
    colorFill: {
        icon: 'color-fill',
        message: $i18n.get({ id: 'YouAdjustedTheFillConfiguration', dm: '你调整了填色配置' }),
    },
};
const savedMessageMap = {
    filter: $i18n.get({ id: 'FilterConfigurationSaved', dm: '筛选配置已保存' }),
    sort: $i18n.get({ id: 'SortConfigurationSaved', dm: '排序配置已保存' }),
    group: $i18n.get({ id: 'GroupingConfigurationSaved', dm: '分组配置已保存' }),
    colorFill: $i18n.get({ id: 'FillConfigurationSaved', dm: '填色配置已保存' }),
};
export function ToolbarNotification({ type, visible, closing = false, onCancel, onSave, saveDisabled = false, isCancelled: externalIsCancelled = false, changedCount = 1, }) {
    const config = notificationConfig[type];
    const [isSaved, setIsSaved] = useState(false);
    const [internalIsCancelled, setInternalIsCancelled] = useState(false);
    // 使用外部传入的 isCancelled 或内部状态
    const isCancelled = externalIsCancelled || internalIsCancelled;
    // 当 visible 变化时重置状态
    useEffect(() => {
        if (visible) {
            setIsSaved(false);
            setInternalIsCancelled(false);
        }
    }, [visible]);
    // 当外部 isCancelled 变化时，同步内部状态
    useEffect(() => {
        if (externalIsCancelled) {
            setInternalIsCancelled(true);
        }
    }, [externalIsCancelled]);
    const handleSave = () => {
        onSave();
        setIsSaved(true);
        // 保存成功状态由父组件控制隐藏时机
    };
    const handleCancel = () => {
        onCancel();
        setInternalIsCancelled(true);
        // 取消状态由父组件控制隐藏时机
    };
    const showActions = !isSaved && !isCancelled;
    // 多种配置变化时的文案
    const isMultipleChanged = changedCount > 1;
    const multipleChangedMessage = $i18n.get({
        id: 'YouAdjustedMultipleViewConfigura_769060377',
        dm: '你调整了多个视图配置',
    });
    const multipleSavedMessage = $i18n.get({
        id: 'MultipleConfigurationsSaved',
        dm: '多个配置已保存',
    });
    // 计算显示文案
    let displayMessage;
    if (isSaved) {
        displayMessage = isMultipleChanged ? multipleSavedMessage : savedMessageMap[type];
    }
    else {
        displayMessage = isMultipleChanged ? multipleChangedMessage : config.message;
    }
    const wrapperCls = classNames('toolbar-notification', {
        'toolbar-notification-visible': visible,
        'toolbar-notification-closing': closing,
        'toolbar-notification-saved': isSaved,
    });
    const messageCls = classNames('toolbar-notification-message', {
        'toolbar-notification-message-saved': isSaved,
    });
    return (React.createElement("div", { className: wrapperCls },
        React.createElement("div", { className: messageCls },
            isSaved && (React.createElement(CnIcon, { type: "complete", size: 14, className: "toolbar-notification-saved-icon" })),
            displayMessage),
        showActions && (React.createElement("div", { className: "toolbar-notification-actions" },
            React.createElement(CnButton, { text: true, className: "toolbar-notification-cancel", onClick: handleCancel }, $i18n.get({ id: 'Cancel', dm: '取消' })),
            React.createElement("div", { className: "toolbar-notification-divider" }),
            React.createElement(CnButton, { text: true, className: "toolbar-notification-save", disabled: saveDisabled, onClick: handleSave }, $i18n.get({ id: 'Save', dm: '保存' }))))));
}
