/**

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

import {StoreContext} from 'react-devtools-shared/src/devtools/views/context';

import {useSubscription} from 'react-devtools-shared/src/devtools/views/hooks';

import {NativeStyleContext} from './context';

import LayoutViewer from './LayoutViewer';

import StyleEditor from './StyleEditor';

import {TreeStateContext} from '../TreeContext';

type Props = {};

export default function NativeStyleEditorWrapper(_: Props): React.Node {

  const store = useContext(StoreContext);

  const subscription = useMemo(

    () => ({

      getCurrentValue: () => store.supportsNativeStyleEditor,

      subscribe: (callback: Function) => {

        store.addListener('supportsNativeStyleEditor', callback);

        return () => {

          store.removeListener('supportsNativeStyleEditor', callback);

        };

      },

    }),

    [store],

  );

  const supportsNativeStyleEditor = useSubscription<boolean>(subscription);

  if (!supportsNativeStyleEditor) {

    return null;

  }

  return <NativeStyleEditor />;

}

function NativeStyleEditor(_: Props) {

  const {getStyleAndLayout} = useContext(NativeStyleContext);

  const {inspectedElementID} = useContext(TreeStateContext);

  if (inspectedElementID === null) {

    return null;

  }

  const maybeStyleAndLayout = getStyleAndLayout(inspectedElementID);

  if (maybeStyleAndLayout === null) {

    return null;

  }

  const {layout, style} = maybeStyleAndLayout;

  return (

    <Fragment>

      {layout !== null && (

        <LayoutViewer id={inspectedElementID} layout={layout} />

      )}

      {style !== null && (

        <StyleEditor

          id={inspectedElementID}

          style={style !== null ? style : {}}

        />

      )}

    </Fragment>

  );

}