import Ducky from '../../container';
import { getPrefixedClassName } from '../utils';
import { ComponentPlugin } from '../../models/component';
import { MODEL } from '../../constants';
import { ComponentMenuProps } from './types';

export default function ComponentMenu(props: ComponentMenuProps) {
  const { canvas } = props;

  const handleClick = (componentPlugin: ComponentPlugin) => {
    const id = canvas.addComponent(componentPlugin);
    canvas.focusComponent(id);
  };

  return (
    <div className={getPrefixedClassName('component-menu')}>
      <h3>Component Menu</h3>
      {Ducky.getAll(MODEL.ComponentPlugin)?.map((componentPlugin: ComponentPlugin) => (
        <span
          className={getPrefixedClassName('component-menu-item')}
          key={componentPlugin.type}
          onClick={() => handleClick(componentPlugin)}
        >
          {componentPlugin.title}
        </span>
      ))}
    </div>
  );
}