import { Dropdown, type MenuProps } from 'antd';
import { useEffect } from 'react';
import styles from './index.less';

type PropsLabelProps = {
  title: string;
  menuItems: MenuProps['items'];
  onClick?: (key: string) => void;
};

function PropsLabel({ title, menuItems, onClick }: PropsLabelProps) {
  useEffect(() => {}, []);

  const handleItemClick: MenuProps['onClick'] = (e) => {
    const keyPath = e.keyPath.reverse();
    if (keyPath[0] === 'global') {
      onClick?.(`\${${e.key}}`);
    } else {
      onClick?.(`{{${keyPath.join('.')}}}`);
    }
  };

  return (
    <div className={styles['props-label']}>
      <div>{title}</div>
      {menuItems && menuItems.length > 0 && (
        <Dropdown
          menu={{
            items: menuItems,
            onClick: handleItemClick,
            triggerSubMenuAction: 'hover',
          }}
          trigger={['click']}
          placement="topRight"
          arrow
        >
          <a onClick={(e) => e.preventDefault()}>参数</a>
        </Dropdown>
      )}
    </div>
  );
}

export default PropsLabel;
