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

export default {
  componentName: 'AMTabs',
  docUrl: 'https://mobile.ant.design/zh/components/tabs',
  title: '标签页',
  category: '导航',
  group: '基础组件',
  props: [
    {
      name: 'activeKey',
      title: {
        label: '当前激活项',
        tip: 'activeKey | 当前激活 tab 面板的 key',
      },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'activeLineMode',
      title: { label: '下划线',
         tip: 'activeLineMode | 激活 tab 下划线的模式',
      },
      propType: { type: 'oneOf', value: ['auto', 'full', 'fixed'] },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: 'auto',
                value: 'auto',
              },
              {
                title: 'full',
                value: 'full',
              },
              {
                title: 'fixed',
                value: 'fixed',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'auto',
    },
    {
      name: 'defaultActiveKey',
      title: {
        label: '初始项',
        tip: 'defaultActiveKey | 初始化选中面板的 key',
      },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'stretch',
      title: {
        label: '头部拉伸',
        tip: 'stretch | 选项卡头部是否拉伸',
      },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'direction',
      title: { label: '文档方向',
         tip: 'direction | 文档排版方向',
      },
      propType: { type: 'oneOf', value: ['ltr', 'rtl'] },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '靠左',
                value: 'ltr',
              },
              {
                title: '靠右',
                value: 'rtl',
              }
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'ltr',
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        pxProp('active-line-border-radius', '当前激活tab下划线圆角'),
        color('active-line', '当前激活tab下划线颜色'),
        pxProp('active-line-height', '当前激活tab下划线高度'),
        pxProp('fixed-active-line-width', '当前激活tab下划线宽度','仅在activeLineMode为fixed时有效'),
        color('active-title', '当前激活tab文字颜色'),
        pxProp('content-padding', 'tab内容区padding'),
        fontSize('title', '选项卡头字体大小'),
      ],
    },
  ],
  configure: {
    component: {
      isContainer: true,
      nestingRule: { childWhitelist: ['AMTabs.Tab'] } 
    },
    supports: {
      events: [
        {
          name: 'onChange',
          description: '切换面板的回调',
          template: "onChange(key,${extParams}){\n// 切换面板的回调\nconsole.log('onChange');}",
        },
      ],
      style: true,
    },
  },
  snippets,
};