// demo.tsx
import React from 'react';
import { Node } from '@alilc/lowcode-designer';
import { Dropdown, Icon } from '@alifd/next';
import store from 'store';

const model = [
  {
      value: 'option1',
      label: '选项1',
    },
    {
      value: ' option2',
      label: '选项2',
    },
]

import './index.less';

function SettetSwitch(props: any) {
 // 该 node 为 createIcon 传入
  const { node } = props;

  return (
    <Dropdown
      trigger={<Icon type="switch" size="small" />}
      onVisibleChange={() => store.set('setterValue', null)}
      triggerType={['hover']}
    >
      <div>
        {model.map((item) => (
          <div
            className="component-select-item"
            onClick={() => {
              // 设置物料属性
              node?.setPropValue('setter.componentName', item.value);
              node?.document?.selection.remove(node.id);
            }}
          >
            {item.label}
          </div>
        ))}
      </div>
    </Dropdown>
  );
}

export default {
  name: 'settetSwitch',
  content: {
    icon: <SettetSwitch />,
    title: 'Setter切换',
  },
  condition: (node: Node) => {
    return node.componentMeta?.componentName === 'Setters';
  },
  important: true,
};


// plugin.tsx
export default async function registerPlugins() {
  // 在设计器辅助层增加一个扩展 action
  material.addBuiltinComponentAction(setterSelect);
}