/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useContext} from 'react';
import {StoreContext} from '../context';
import {
  ComponentFilterElementType,
  ElementTypeSuspense,
} from 'react-devtools-shared/src/frontend/types';

export default function CannotSuspendWarningMessage(): React.Node {
  const store = useContext(StoreContext);
  const areSuspenseElementsHidden = !!store.componentFilters.find(
    filter =>
      filter.type === ComponentFilterElementType &&
      filter.value === ElementTypeSuspense &&
      filter.isEnabled,
  );

  // Has the user filtered out Suspense nodes from the tree?
  // If so, the selected element might actually be in a Suspense tree after all.
  if (areSuspenseElementsHidden) {
    return (
      <div>
        Suspended state cannot be toggled while Suspense components are hidden.
        Disable the filter and try again.
      </div>
    );
  } else {
    return (
      <div>
        The selected element is not within a Suspense container. Suspending it
        would cause an error.
      </div>
    );
  }
}