import { default as CxAlert } from '../../../atoms/src/components/alert/alert.ts';
import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
import { default as CxFormatDate } from '../../../atoms/src/components/format-date/format-date.ts';
import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { GetClusterDataFunction, Service, UpdateServiceFunction } from '../../../types/src/cluster-management';
import { CSSResultGroup } from 'lit';
import { default as CxClusterManagementService } from './components/cluster-management-service';

/**
 * @summary Widget for managing cluster. Pure web component version of orangelogic.react.clustermanagement.
 * Displays two overlapping range sliders for each service in the cluster data:
 * - A disabled slider with a gray tooltip, to display the number of currently running nodes (running count).
 * - An adjustable slider to change the service's node count (desired count).
 * If the running count is outside the min-max range, it is shown as a text label instead of a disabled slider (see second service in the example below).
 * Data refreshes every 60 seconds by default, with the last refresh time displayed at the bottom. This time interval is modifiable using `refresh-interval` property.
 * To use, provide `getClusterData()` and `updateService()` callback functions.
 *
 * @event cx-refresh - Emitted when a data refresh has been made.
 *
 * @csspart base - The component's base wrapper.
 * @csspart spinner - The spinner that gets displayed when no data is available yet.
 * @csspart alert - The alert that gets displayed when an error occurs.
 * @csspart service - The container that wraps around each service.
 * @csspart service__label - The label for each service.
 * @csspart service__range - The wrapper around each service's range sliders.
 * @csspart service__running-range - Each service's range slider for the currently running count.
 * @csspart service__desired-range - Each service's range slider for the desired count.
 * @csspart status - The container that wraps the status date and refresh button.
 * @csspart status__refresh-button - The button to refresh the data.
 * @csspart status__refresh-spinner - The spinner that gets displayed when data is being refreshed.
 * @csspart dialog - The dialog that gets displayed when confirming a change.
 * @csspart dialog__confirm-button - The confirm button inside the confirmation dialog.
 * @csspart dialog__cancel-button - The cancel button inside the confirmation dialog.
 *
 * @typedef Service - {
 *   desiredCount: number;
 *   maxNodeCount: number;
 *   minNodeCount: number;
 *   runningCount: number;
 *   serviceId: string;
 * }
 *
 * @typedef ClusterData - {
 *   services: Service[];
 * }
 */
export default class CxClusterManagement extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-alert': typeof CxAlert;
        'cx-button': typeof CxButton;
        'cx-cluster-management-service': typeof CxClusterManagementService;
        'cx-dialog': typeof CxDialog;
        'cx-format-date': typeof CxFormatDate;
        'cx-icon': typeof CxIcon;
        'cx-icon-button': typeof CxIconButton;
        'cx-spinner': typeof CxSpinner;
    };
    private intervalIdRefresh;
    private readonly localize;
    dialog: CxDialog;
    refreshDate: CxFormatDate;
    private _status;
    get status(): "error" | "loading" | "ready";
    _isRefreshing: boolean;
    get isRefreshing(): boolean;
    private errorObject;
    private clusterData;
    private sliderDesiredCount;
    private confirmCount;
    /** How many seconds between each automatic data refresh */
    refreshInterval: number;
    /** A function used to get cluster data. We call this function every data refresh. */
    getClusterData: GetClusterDataFunction;
    /** A function used to update a service's count. Returns the updated service data. */
    updateService: UpdateServiceFunction;
    /** A function to clean up resources. Gets called when this component disconnects/unmounts. */
    cleanUp: () => void;
    /** If true, the component is in readonly mode. No changes can be made to the service counts. */
    readonly: boolean;
    runFirstUpdated(): void;
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    refreshStatus(): Promise<void>;
    private setStateForService;
    private confirmCallback;
    private handleChangeCommitted;
    private handleChange;
    private handleDialogConfirm;
    private handleDialogCancel;
    renderConfirm(): import('lit').TemplateResult<1>;
    renderLoading(): import('lit').TemplateResult<1>;
    renderError(): import('lit').TemplateResult<1>;
    renderService(currentService: Service): import('lit').TemplateResult<1>;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-cluster-management': CxClusterManagement;
    }
}
