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

export default {
  snippets,
  componentName: 'AMModal',
  docUrl: 'https://mobile.ant.design/zh/components/modal',
  title: '弹窗',
  category: '反馈',
  group: '基础组件',
  priority: 1,
  props: [
    {
      name: 'content',
      title: { label: '内容', tip: '内容' },
      propType: 'node',
      setter: {
        componentName: 'SlotSetter',
        title: '自定义插槽',
        isRequired: true,
        initialValue: {
          type: 'JSSlot',
          value: [],
        },
      },
    },
    {
      name: 'title',
      title: { label: '标题', tip: '标题' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'header',
      title: { label: '顶部区域', tip: '顶部区域' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'cancelText',
      title: { label: '取消按钮文字', tip: '取消按钮文字' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'confirmText',
      title: { label: '确认按钮文字', tip: 'confirmText | 确认按钮文字' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'visible',
      title: { label: '是否可见', tip: '选择器是否可见' },
      propType: 'bool',
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      name: 'showCloseButton',
      title: { label: '是否在右上角显示关闭图标按钮', tip: '是否在右上角显示关闭图标按钮' },
      propType: 'bool',
      setter: 'BoolSetter',
      supportVariable: true,
      defaultValue: false,
    },
    {
      name: 'closeOnAction',
      title: { label: '点击操作按钮后后是否关闭', tip: '点击操作按钮后后是否关闭' },
      propType: 'bool',
      setter: 'BoolSetter',
      supportVariable: true,
      defaultValue: false,
    },
    {
      name: 'destroyOnClose',
      title: { label: '销毁子元素', tip: '关闭时销毁 Modal 里的子元素' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      name: 'forceRender',
      title: { label: '强制渲染Modal', tip: '强制渲染Modal' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      name: 'closeOnMaskClick',
      title: { label: '点击蒙层关闭', tip: '点击蒙层是否允许关闭' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      name: 'maskStyle',
      title: { label: '遮罩样式', tip: ' 遮罩样式' },
      propType: 'object',
    },
    {
      name: 'maskClassName',
      title: { label: '遮罩类名', tip: '遮罩类名' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'bodyStyle',
      title: { label: '内容样式', tip: ' 内容样式' },
      propType: 'object',
    },
    {
      name: 'bodyClassName',
      title: { label: '内容类名', tip: '内容类名' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'getContainer',
      title: {
        label: '指定挂载节点',
        tip: '指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom',
      },
      propType: { type: 'oneOfType', value: ['node', 'func'] },
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        fontSize('header-button', '确定和取消按钮的字号'),
        fontSize('item', '选择项的字号'),
        fontSize('title', '标题的字号'),
        stringProp('item-height', '选项的高度', '选项的高度', '仅支持 px rem 和 vw 单位'),
      ],
    },
  ],
  configure: {
    component: {
      isModal: true,
    },
    supports: {
      style: true,
      events: [
        {
          name: 'onClose',
          description: '关闭时的回调',
          template: "onClose(${extParams}){\n// 关闭时触发\nconsole.log('onClose');}",
        },
        {
          name: 'afterShow',
          description: '点击确定回调',
          template: 'afterShow(${extParams}){\n// 完全展示后触发}',
        },
        {
          name: 'afterClose',
          description: '完全关闭后的回调',
          template: "afterClose(${extParams}){\n// 完全关闭后的回调\nconsole.log('afterClose');}",
        },
        {
          name: 'onAction',
          description: '点击操作按钮时触发',
          template:
            "onAction(action , index, ${extParams}){\n// 点击操作按钮时触发\nconsole.log('onAction');}",
        },
      ],
    },
  },
};