import { DebugDataType } from '@/utils/debug-screen';
import React, { useState } from 'react';
import styles from './style.less';
import LogTitle from './LogTitle';
import LogContent from './LogContent';

const ItemDebug = (props: DebugDataType) => {
  const [isExpand, setIsExpand] = useState(false);
  const { name, id, dispatchFrom, type, debugMsg } = props;
  const onChange = (e) => {
    setIsExpand(e);
  };
  return (
    <div className={styles.itemContainer}>
      <LogTitle
        onChange={onChange}
        isExpand={isExpand}
        type={type}
        debugMsg={debugMsg}
        name={name}
        id={id}
        dispatchFrom={dispatchFrom}
      />
      {isExpand ? <LogContent type={type} dispatchFrom={dispatchFrom} debugMsg={debugMsg} /> : null}
    </div>
  );
};

export default ItemDebug;
