import {Alert} from '@gravity-ui/uikit';

import QuerySettingsDescription from '../../../../components/QuerySettingsDescription/QuerySettingsDescription';
import {cn} from '../../../../utils/cn';
import {useChangedQuerySettings} from '../../../../utils/hooks/useChangedQuerySettings';
import i18n from '../i18n';

const b = cn('ydb-query-settings-banner');

import './QuerySettingsBanner.scss';

export function QuerySettingsBanner() {
    const {isBannerShown, changedLastExecutionSettingsDescriptions, closeBanner} =
        useChangedQuerySettings();
    return isBannerShown ? (
        <Alert
            className={b()}
            theme="info"
            align="baseline"
            style={{paddingTop: 11, paddingBottom: 11}}
            message={
                <QuerySettingsDescription
                    prefix={i18n('alert_modified-query-settings')}
                    querySettings={changedLastExecutionSettingsDescriptions}
                />
            }
            onClose={closeBanner}
        />
    ) : null;
}