"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_router_dom_v5_compat_1 = require("react-router-dom-v5-compat");
const react_core_1 = require("@patternfly/react-core");
const add_circle_o_icon_1 = require("@patternfly/react-icons/dist/js/icons/add-circle-o-icon");
const common_1 = require("../../../common");
const ClustersTable_1 = tslib_1.__importDefault(require("./ClustersTable"));
const slice_1 = require("../../store/slices/clusters/slice");
const api_1 = require("../../../common/api");
const services_1 = require("../../services");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const ClusterPollingErrorModal_1 = tslib_1.__importDefault(require("../clusterDetail/ClusterPollingErrorModal"));
const store_1 = require("../../store");
const selectors_1 = require("../../store/slices/clusters/selectors");
const Clusters = () => {
    const navigate = (0, react_router_dom_v5_compat_1.useNavigate)();
    const { LOADING, EMPTY, POLLING_ERROR, RELOADING } = common_1.ResourceUIState;
    const { addAlert } = (0, common_1.useAlerts)();
    const { t } = (0, use_translation_wrapper_1.useTranslation)();
    const clusterRows = (0, store_1.useSelectorDay1)((0, selectors_1.selectClusterTableRows)(t));
    const clustersUIState = (0, store_1.useSelectorDay1)(selectors_1.selectClustersUIState);
    const uiState = react_1.default.useRef(clustersUIState);
    if (clustersUIState !== RELOADING) {
        uiState.current = clustersUIState;
    }
    const dispatch = (0, store_1.useDispatchDay1)();
    const deleteClusterAsync = react_1.default.useCallback((clusterId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
        try {
            yield services_1.ClustersService.remove(clusterId);
            dispatch((0, slice_1.deleteCluster)(clusterId));
        }
        catch (e) {
            (0, api_1.handleApiError)(e, () => addAlert({
                title: 'Cluster could not be deleted',
                message: (0, api_1.getApiErrorMessage)(e),
            }));
        }
    }), [dispatch, addAlert]);
    const fetchClusters = react_1.default.useCallback(() => void dispatch((0, slice_1.fetchClustersAsync)()), [dispatch]);
    react_1.default.useEffect(() => {
        // Fetch immediately on mount
        fetchClusters();
        // Set up polling for subsequent updates
        const timer = setInterval(() => {
            fetchClusters();
        }, common_1.REDUCED_POLLING_INTERVAL);
        return () => clearInterval(timer);
    }, [fetchClusters]);
    switch (uiState.current) {
        case LOADING:
            return (react_1.default.createElement(react_core_1.PageSection, { hasBodyWrapper: false, isFilled: true },
                react_1.default.createElement(common_1.LoadingState, null)));
        case EMPTY:
            return (react_1.default.createElement(react_core_1.PageSection, { hasBodyWrapper: false, isFilled: true },
                react_1.default.createElement(common_1.EmptyState, { icon: add_circle_o_icon_1.AddCircleOIcon, title: "Create new assisted cluster", content: "There are no clusters yet. This wizard is going to guide you through the OpenShift cluster deployment.", primaryAction: react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.primary, onClick: () => navigate(`~new`), id: "empty-state-new-cluster-button", "data-ouia-id": "button-create-new-cluster" }, "Create New Cluster") })));
        default:
            if (clusterRows.length === 0 && uiState.current === POLLING_ERROR) {
                return (react_1.default.createElement(react_core_1.PageSection, { hasBodyWrapper: false, isFilled: true },
                    react_1.default.createElement(common_1.ErrorState, { title: "Failed to fetch clusters.", fetchData: fetchClusters })));
            }
            else {
                return (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(react_core_1.PageSection, { hasBodyWrapper: false },
                        react_1.default.createElement(react_core_1.Content, { component: "h1" }, "Assisted Clusters")),
                    react_1.default.createElement(react_core_1.PageSection, { hasBodyWrapper: false, isFilled: true },
                        react_1.default.createElement(common_1.Alerts, null),
                        react_1.default.createElement(ClustersTable_1.default, { rows: clusterRows, deleteCluster: deleteClusterAsync })),
                    uiState.current === POLLING_ERROR && (react_1.default.createElement(ClusterPollingErrorModal_1.default, { title: 'Failed to fetch clusters', content: 'There was an error retrieving data. Check your connection and try refreshing the page.' }))));
            }
    }
};
const ClustersPage = () => (react_1.default.createElement(common_1.AlertsContextProvider, null,
    react_1.default.createElement(Clusters, null)));
exports.default = ClustersPage;
//# sourceMappingURL=Clusters.js.map