import snippets from './snippets';
import { pxProp, stringProp } from '../_utils/css';

export default {
  componentName: 'AMPopover',
  docUrl: 'https://mobile.ant.design/zh/components/popover',
  title: '气泡弹框',
  category: '反馈',
  group: '基础组件',
  props: [
    {
      name: 'content',
      title: {
        label: '弹出内容',
        tip: 'content | 弹出内容',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'defaultVisible',
      title: { label: '默认是否可见', tip: 'defaultVisible | 默认是否可见' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: true,
    },
    // {
    //   name: 'visible',
    //   title: { label: '是否可见', tip: 'visible | 是否可见' },
    //   propType: 'bool',
    //   setter: 'BoolSetter',
    //   defaultValue: false,
    // },
    {
      name: 'placement',
      title: {
        label: '气泡位置',
        tip: 'placement | 气泡位置',
      },
      propType: {
        type: 'oneOf',
        value: [
          'top',
          'left',
          'right',
          'bottom',
          'top-start',
          'top-end',
          'bottom-start',
          'bottom-end',
          'left-start',
          'left-end',
          'right-start',
          'right-end',
        ],
      },
      defaultValue: 'top',
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: [
            {
              title: '上',
              value: 'top',
            },
            {
              title: '左',
              value: 'left',
            },
            {
              title: '右',
              value: 'right',
            },
            {
              title: '下',
              value: 'bottom',
            },
            {
              title: '上左',
              value: 'top-start',
            },
            {
              title: '上右',
              value: 'top-end',
            },
            {
              title: '下左',
              value: 'bottom-start',
            },
            {
              title: '下右',
              value: 'bottom-end',
            },
            {
              title: '左上',
              value: 'left-start',
            },
            {
              title: '左下',
              value: 'left-end',
            },
            {
              title: '右上',
              value: 'right-top',
            },
            {
              title: '右下',
              value: 'right-end',
            },
          ],
        },
      },
    },
    {
      name: 'mode',
      title: { label: '模式', tip: 'mode | 模式' },
      propType: { type: 'oneOf', value: ['light', 'dark'] },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: 'light',
                value: 'light',
              },
              {
                title: 'dark',
                value: 'dark',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'light',
    },
    {
      name: 'destroyOnHide',
      title: { label: '不可见时销毁DOM', tip: 'destroyOnHide | 不可见时是否销毁 DOM 结构' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [stringProp('z-index', 'z-index'), pxProp('arrow-size', '箭头尺寸')],
    },
  ],
  configure: {
    component: {
      isContainer: true,
      isModal: false,
    },
    advanced: {
      callbacks: {
        onNodeAdd: (fragment, currentNode) => {
          if (currentNode.children.size >= 2) {
            currentNode.children.delete(fragment);
          }
        },
      },
    },
    supports: {
      events: [
        {
          name: 'onVisibleChange',
          description: '完全关闭后触发',
          template: "afterClose(${extParams}){\n// 完全关闭后触发\nconsole.log('afterClose');}",
        },
        {
          name: 'getContainer',
          description: '指定挂载的 HTML 节点',
          template:
            "getContainer(${extParams}){\n// 指定挂载的 HTML 节点，默认为 body，如果为 null 的话，会渲染到当前节点\nconsole.log('getContainer');}",
        },
      ],
      style: true,
    },
  },
  snippets,
};