import { useMemo } from 'react';
import { useEditor, getEditorName } from '@tempi/core-editor';
import { PopupEditorV1 } from '@tempi/core-elements';

export const usePopupList = () => {
  const { nodes } = useEditor((state) => {
    return {
      nodes: state.nodes,
    };
  });

  const popupList = useMemo(() => {
    return Object.keys(nodes)
      .filter(
        (key) => nodes[key]?.data?.name === getEditorName({ PopupEditorV1 }),
      )
      .map((id) => ({
        label: nodes[id].data.props.name,
        value: id,
      }));
  }, [nodes]);

  return {
    popupList,
  };
};