import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import styles from './style/index.module.less';
import SideBar from './sideBar';
import CompInfo from './compInfo';

const AppCompComponent = () => {
  const [compList, setCompList] = useState([]);
  const [currentCompInfo, setCurrentCompInfo] = useState(null);
  const { info, projectComponentData } = useSelector((state: any) => state.ideContainer);

  useEffect(() => {
    setCompList(projectComponentData[info.id]);
  }, []);

  return (
    <div className={styles['app-comp-component']}>
      <div className={styles['left']}>
        <SideBar compList={compList} onSelect={(e) => setCurrentCompInfo(e)} />
      </div>
      <div className={styles['right']}>
        <CompInfo currentCompInfo={currentCompInfo} />
      </div>
    </div>
  );
};

export default AppCompComponent;