import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { uuid } from '../utils/index';

const DropdownMeta: IPublicTypeComponentMetadata = {
  componentName: 'Dropdown',
  title: 'Dropdown',
  group: '原子组件',
  category: '选择类',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.27',
    exportName: 'Dropdown',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      name: 'open',
      title: { label: '菜单是否显示', tip: '菜单是否显示' },
      propType: { type: 'oneOf', value: [true, false] },
      defaultValue: true,
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            {
              title: '默认非受控',
              value: '-',
            },
            {
              title: '显示',
              value: true,
            },
            {
              title: '不显示',
              value: false,
            },
          ],
        },
      },
      extraProps: {
        getValue(target) {
          const { node } = target;
          let value = node.getPropValue('open');
          if (value === undefined) {
            value = '-';
          }
          return value;
        },
        // setValue(target, value) {
        //   console.log('target--', target,value);

        //   const { node } = target;

        //   // if (value === '-') {
        //   //   setTimeout(() => {
        //   //     node.clearPropValue('open');
        //   //   });
        //   // }
        // },
      },
    },
    {
      name: 'arrow',
      title: { label: '显示下拉箭头', tip: '是否显示下拉箭头' },
      propType: 'bool',
      defaultValue: true,
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
    },
    // {
    //   name: 'getPopupContainer',
    //   title: {
    //     label: '渲染父节点',
    //     tip:
    //       '菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010)',
    //   },
    //   propType: 'func',
    // },
    // {
    //   name: 'overlay',
    //   title: { label: '菜单', tip: '菜单' },
    //   propType: { type: 'oneOfType', value: ['node', 'func'] },
    // },
    // {
    //   name: 'overlayClassName',
    //   title: { label: '根元素的类名称', tip: '根元素的类名称' },
    //   propType: 'string',
    // },
    {
      name: 'placement',
      title: {
        label: '弹出位置',
        tip: '菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight`',
      },
      propType: {
        type: 'oneOf',
        value: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
      },
    },
    {
      name: 'titleRender',
      title: {
        label: '菜单内容定义渲染',
        tip: 'render | 插槽内的物料表达式可通过this.record获取当前行数据，this.index获取索引',
      },
      propType: 'func',
      setter: [
        {
          componentName: 'SlotSetter',
          title: '单元格插槽',
          initialValue: {
            type: 'JSSlot',
            params: ['text', 'record', 'index'],
            value: [],
          },
        },
        'VariableSetter',
      ],
    },

    {
      name: 'overlayStyle',
      title: { label: '菜单配置项的样式', tip: '菜单配置项的样式' },
      type: 'group',
      extraProps: {
        display: 'entry',
      },
      items: [
        {
          name: 'overlayStyle',
          title: {
            label: '菜单配置项的样式',
            tip: 'overlayStyle | 菜单配置项的样式',
          },
          setter: 'StyleSetter',
          extraProps: {
            display: 'block',
          },
        },
      ],
    },
    {
      title: '菜单配置项',
      display: 'block',
      type: 'group',
      extraProps: {
        display: 'accordion',
        defaultCollapsed: false,
      },
      items: [
        {
          title: {
            label: {
              type: 'i18n',
              'en-US': 'menuItem',
              'zh-CN': '菜单内容',
            },
          },
          name: 'menuItem',
          setter: {
            componentName: 'ArraySetter',
            props: {
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  config: {
                    items: [
                      {
                        title: {
                          label: {
                            type: 'i18n',
                            'en-US': 'key',
                            'zh-CN': '键值',
                          },
                        },
                        name: 'key',
                        setter: {
                          componentName: 'StringSetter',
                          isRequired: true,
                          initialValue: '',
                        },
                      },
                      {
                        title: {
                          label: {
                            type: 'i18n',
                            'en-US': 'label',
                            'zh-CN': '内容',
                          },
                        },
                        name: 'label',
                        setter: {
                          componentName: 'StringSetter',
                          isRequired: true,
                          initialValue: '',
                        },
                      },
                    ],

                    extraSetter: {
                      componentName: 'MixedSetter',
                      isRequired: false,
                      props: {},
                    },
                  },
                },
                initialValue: () => {
                  return {
                    label: '菜单项',
                    key: `key-${uuid()}`,
                  };
                },
              },
            },
            isRequired: true,
            initialValue: [],
          },
        },
        {
          name: 'menuRender',
          title: {
            label: '菜单内容自定义渲染',
            tip: 'render | 插槽内的物料表达式可通过this.record获取当前行数据，this.index获取索引',
          },
          propType: 'func',
          setter: [
            {
              componentName: 'SlotSetter',
              title: '单元格插槽',
              initialValue: {
                type: 'JSSlot',
                params: ['record', 'index'],
                value: [],
              },
            },
            'VariableSetter',
          ],
        },
        {
          name: 'menuBottomRender',
          title: {
            label: '菜单底部自定义渲染',
            tip: 'render | 插槽内的物料表达式可通过this.record获取当前行数据，this.index获取索引',
          },
          propType: 'func',
          setter: [
            {
              componentName: 'SlotSetter',
              title: '单元格插槽',
              initialValue: {
                type: 'JSSlot',
                params: ['record', 'index'],
                value: [],
              },
            },
            'VariableSetter',
          ],
        },
        {
          name: 'menuHeight',
          title: { label: '菜单高度', tip: '超过这个高度滚动' },
          setter: 'NumberSetter',
        },
      ],
    },
    {
      name: 'trigger',
      title: {
        label: '触发下拉的行为',
        tip: '触发下拉的行为, 移动端不支持 hover',
      },
      propType: {
        type: 'arrayOf',
        value: { type: 'oneOf', value: ['click', 'hover', 'contextMenu'] },
      },
    },
    {
      name: 'onOpenChange',
      title: {
        label: '显示状态回调',
        tip: '菜单显示状态改变时调用，参数为 `open`',
      },
      propType: 'func',
    },
  ],
  configure: {
    component: { isContainer: true },
    supports: {
      style: true,
      events: [
        {
          name: 'onOpenChange',
          template: 'onOpenChange(open,${extParams}){\n// 菜单显示状态改变时调用\n}',
        },
        {
          name: 'handleMenuClick',
          template: 'handleMenuClick({key}){\n// 菜单选中事件\n}',
        },
      ],
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '下拉菜单',
    screenshot: require('./__screenshots__/dropdown.png'),
    schema: {
      componentName: 'Dropdown',
      props: {
        arrow: true,
        menuItem: [
          {
            label: '菜单一',
            key: `key-${uuid()}`,
          },
          {
            label: '菜单二',
            key: `key-${uuid()}`,
          },
        ],
        overlay: {
          type: 'JSSlot',
          value: [
            {
              componentName: 'Icon',
              props: {
                type: 'DownOutlined',
                size: 15,
                // style: {
                //   marginLeft: 4,
                //   verticalAlign: 'middle',
                // },
              },
            },
          ],
        },
      },
      children: [
        {
          componentName: 'typography.text',
          props: {
            children: 'Dropdown',
            show: true,
          },
        },
      ],
    },
  },
];

export default {
  ...DropdownMeta,
  snippets,
};