import useSessionStorage from '@/components/easyUse/useSessionStorage';
import { isOpenEasyVDebugFromUrl } from '@/utils/debug-screen';
import { getTopScreenId } from '@/utils/screen';
import classNames from 'classnames';
import React, { useState } from 'react';
import ConfigContainer from './config-container';
import LogContainer from './debug-content';
import styles from './style.less';

interface Props {
  children: JSX.Element;
}

const ScreenDebugContainer = (props: Props) => {
  const { children } = props;
  const [visible, setVisible] = useState(false);

  const [config, setConfig] = useSessionStorage(`${getTopScreenId()}_debugConfigSession`);
  return isOpenEasyVDebugFromUrl() ? (
    <span className={styles.container}>
      <div className={styles.container} id="debug-container">
        {children}
        {!visible && (
          <div
            onClick={() => setVisible(!visible)}
            className={classNames(styles.btn, 'lightBlueHoverBc')}>
            控制台
          </div>
        )}
      </div>
      <div className={styles.content} style={{ display: visible ? 'block' : 'none' }}>
        <LogContainer
          config={
            config || {
              debugListenStatus: 'initialState',
              autoUpdate: false,
              dataRequest: true,
              filterExecute: true,
              callbackSend: true,
            }
          }
          setConfig={setConfig}
          onClose={() => setVisible(false)}
        />
      </div>
      <ConfigContainer
        config={
          config || {
            debugListenStatus: 'initialState',
            autoUpdate: false,
            dataRequest: true,
            filterExecute: true,
            callbackSend: true,
          }
        }
        setConfig={setConfig}
        visible={visible}
      />
    </span>
  ) : (
    children
  );
};
export default ScreenDebugContainer;
