import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

/**
 * 
  defaultOpenKeys,
  defaultSelectedKeys,
  inlineCollapsed,
  openKeys,
  selectedKeys,
  onOpenChange,
  onSelect,
  dataSource,
  __designMode,
 * 
 */
const DataSourceMenuMeta: IPublicTypeComponentMetadata = {
  componentName: 'DataSourceMenu',
  title: '菜单导航',
  docUrl: '',
  screenshot: '',
  group: '无代码组件',
  category: '无代码数据展示',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'DataSourceMenu',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'dataSource',
      title: {
        type: 'i18n',
        'en-US': 'Source',
        'zh-CN': '数据源',
      },
      setter: {
        componentName: 'PisellDataSourceSetter',
        props: {
          filters: {
            variables: {
              menu: 'all'
            }
          },
        }
      },
      extraProps: {
        setValue(target: any, value: any) {
          return target.getProps().setPropValue('dataSource', value.value);
        },
      },
    },
    {
      name: 'mode',
      propType: {
        type: 'oneOf',
        value: ['vertical', 'horizontal', 'inline']
      },
      description: '菜单模式',
      defaultValue: 'vertical',
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            { label: '垂直', value: 'vertical' },
            { label: '水平', value: 'horizontal' },
            { label: '内嵌', value: 'inline' },
          ]
        }
      }
    },
    {
      name: 'theme',
      propType: {
        type: 'oneOf',
        value: ['light', 'dark']
      },
      description: '主题',
      defaultValue: 'light',
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            { label: '亮色', value: 'light' },
            { label: '暗色', value: 'dark' },
          ]
        }
      }
    },
    {
      name: 'defaultOpenKeys',
      propType: 'array',
      description: '默认展开的菜单项',
      defaultValue: [],
      setter: 'JsonSetter'
    },
    {
      name: 'defaultSelectedKeys',
      propType: 'array',
      description: '默认选中的菜单项',
      defaultValue: [],
      setter: 'JsonSetter'
    },
    {
      name: 'inlineCollapsed',
      propType: "bool",
      description: '是否内嵌折叠',
      defaultValue: false,
      setter: 'BoolSetter'
    },
    {
      name: 'openKeys',
      propType: 'array',
      description: '展开的菜单项',
      defaultValue: [],
      setter: 'JsonSetter'
    },
    {
      name: 'selectedKeys',
      propType: 'array',
      description: '选中的菜单项',
      defaultValue: [],
      setter: 'JsonSetter'
    },
    {
      name: 'other',
      propType: 'object',
      description: '其他属性',
      defaultValue: {},
      setter: 'JsonSetter'
    },
    {
      name: 'style',
      propType: 'object',
      description: '样式',
      defaultValue: {},
      setter: 'StyleSetter'
    }
  ],
  configure: {
    component: {
      isContainer: true
    },
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onOpenChange',
          template: "onOpenChange(openKeys,${extParams}){\n// 展开菜单项变化时的回调\nconsole.log('onOpenChange', openKeys);}",
        },
        {
          name: 'onSelect',
          template: "onSelect(selectedKeys,${extParams}){\n// 选中菜单项时的回调\nconsole.log('onSelect', selectedKeys);}",
        },
      ],
    },
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '菜单导航',
    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/menu-1.jpg',
    schema: {
      componentName: 'DataSourceMenu',
      props: {
        mode: 'vertical',
        theme: 'light',
        dataSource: ''
      }
    }
  }
];

export default {
  ...DataSourceMenuMeta,
  snippets
};