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

import snippets from "./snippets";

const AnchorMeta: IPublicTypeComponentMetadata = {
  componentName: "PisellAnchor",
  title: "锚点导航",
  category: "导航",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "PisellAnchor",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      name: 'options',
      title: { label: '选项列表', tip: '导航选项列表' },
      propType: {
        type: 'arrayOf',
        value: {
          type: 'shape',
          value: [
            {
              name: 'id',
              propType: 'string',
              description: '选项ID',
              defaultValue: '',
            },
            {
              name: 'name',
              propType: 'node',
              description: '选项名称',
              defaultValue: '',
            }
          ],
        },
      },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'id',
                    title: '选项ID',
                    setter: 'StringSetter',
                    isRequired: true
                  },
                  {
                    name: 'name',
                    title: '选项名称',
                    setter: ['StringSetter', 'ExpressionSetter'],
                    isRequired: true
                  }
                ],
              },
            },
            initialValue: () => {
              const id = uuid();
              return {
                id,
                name: `选项${id}`,
              };
            },
          },
        },
      },
    },
    {
      name: 'tab',
      title: { label: '当前选中项', tip: '当前选中的选项ID' },
      propType: 'string',
    },
    {
      name: 'className',
      title: { label: '自定义类名', tip: '自定义类名' },
      propType: 'string',
    },
    {
      name: 'style',
      title: { label: '自定义样式', tip: '自定义样式' },
      propType: 'object',
    }
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: "onChange",
          template:
            "onChange(key){\n// 选项切换时的回调\nconsole.log('onChange', key);}",
        }
      ],
    },
    component: {
      isContainer: false,
      nestingRule: {
        childWhitelist: []
      },
    },
  },
};

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