/**

 * 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 {Fragment, useCallback, useContext} from 'react';

import {ProfilerContext} from './ProfilerContext';

import styles from './RootSelector.css';

export default function RootSelector(_: {}): React.Node {

  const {profilingData, rootID, setRootID} = useContext(ProfilerContext);

  const options = [];

  if (profilingData !== null) {

    profilingData.dataForRoots.forEach((dataForRoot, id) => {

      options.push(

        <option key={id} value={id}>

          {dataForRoot.displayName}

        </option>,

      );

    });

  }

  const handleChange = useCallback(

    ({currentTarget}: $FlowFixMe) => {

      setRootID(parseInt(currentTarget.value, 10));

    },

    [setRootID],

  );

  if (profilingData === null || profilingData.dataForRoots.size <= 1) {

    // Don't take up visual space if there's only one root.

    return null;

  }

  return (

    <Fragment>

      <div className={styles.Spacer} />

      <select value={rootID} onChange={handleChange}>

        {options}

      </select>

    </Fragment>

  );

}