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

export default {
  snippets,
  componentName: 'AMCheckbox',
  docUrl: 'https://mobile.ant.design/zh/components/checkbox',
  title: '复选框',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'id',
      title: { label: 'ID', tip: 'input元素的id' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'children',
      title: {
        label: '内容',
        tip: 'children | 内容',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'defaultChecked',
      title: { label: '默认值', tip: '初始是否选中' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'checked',
      title: { label: '当前值', tip: '指定当前是否选中' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'value',
      title: { label: '标识值', tip: 'value | 携带的标识值，用于 Group 模式' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'block',
      title: {
        label: '块级元素',
        tip: 'block | 是否是块级元素',
      },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        fontSize('', '文字的字号'),
        pxProp('gap', '图标和文字的间距'),
        pxProp('icon-size', '图标的大小'),
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          description: '输入框内容变化时的回调',
          template:
            "\tonChange(value,${extParams}){\n\t\t// 输入框内容变化时的回调\n\t\tconsole.log('onChange',value);\n\t}\n",
        },
        {
          name: 'onClick',
          description: '点击选型的回调',
          template:
            "\tonClick(event,${extParams}){\n\t\t// Checkbox 的点击事件\n\t\tconsole.log('onClick',event);\n\t}\n",
        },
      ],
    },
  },
};