import { useEffect } from 'react';
import { CANVAS_EVENT } from '../../models/canvas';
import { useForceUpdate } from '../hooks';
import { getPrefixedClassName } from '../utils';
import ConfigPanelGenerator from './ConfigPanelGenerator';
import { ConfigPanelProps } from './types';

export default function ConfigPanel(props: ConfigPanelProps) {
  const { canvas } = props;
  const { focusedComponent } = canvas;
  const forceUpdate = useForceUpdate();

  useEffect(() => {
    canvas.on(CANVAS_EVENT.FocusComponent, forceUpdate);
    canvas.on(CANVAS_EVENT.BlurComponent, forceUpdate);

    return () => {
      canvas.off(CANVAS_EVENT.FocusComponent);
      canvas.off(CANVAS_EVENT.BlurComponent);
    };
  }, []);

  return (
    <div className={getPrefixedClassName('config-panel')}>
      <h3>Config Panel</h3>
      {focusedComponent ? (
        <ConfigPanelGenerator component={focusedComponent} />
      ) : (
        'Please focus a component in the canvas'
      )}
    </div>
  );
}