import snippets from './snippets';

export default {
  snippets,
  componentName: 'WalletCard',
  title: {
    type: 'i18n',
    'en-US': 'Wallet Card',
    'zh-CN': '钱包卡片',
  },
  category: {
    type: 'i18n',
    'en-US': 'General',
    'zh-CN': '通用',
  },
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'WalletCard',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      name: 'isLogin',
      title: {
        label: {
          type: 'i18n',
          'en-US': 'Display Status',
          'zh-CN': '展示状态',
        },
        tip: {
          type: 'i18n',
          'en-US': 'Login status of the card. Values: true | false',
          'zh-CN': '卡片的登录状态。取值: true | false',
        },
      },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            { title: '已登录', value: true },
            { title: '未登录', value: false },
          ],
          optionType: 'button',
        },
      },
      defaultValue: true,
    },
    {
      name: 'mode',
      title: {
        label: {
          type: 'i18n',
          'en-US': 'Display Mode',
          'zh-CN': '展示模式',
        },
        tip: {
          type: 'i18n',
          'en-US': 'Display mode. Values: light | dark',
          'zh-CN': '展示模式。取值: light | dark',
        },
      },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            { title: 'Light', value: 'light' },
            { title: 'Dark', value: 'dark' },
          ],
        },
      },
      defaultValue: 'dark',
    },
    {
      name: 'cardStyle',
      title: {
        label: {
          type: 'i18n',
          'en-US': 'Card Style',
          'zh-CN': '卡片样式',
        },
        tip: {
          type: 'i18n',
          'en-US': 'Card style. Values: normal | full',
          'zh-CN': '卡片样式。取值: normal | full',
        },
      },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            { title: 'Full', value: 'full' },
            { title: 'Default', value: 'normal' },
          ],
        },
      },
      defaultValue: 'normal',
    },
    {
      name: 'codeDirection',
      title: {
        label: {
          type: 'i18n',
          'en-US': 'Code Position',
          'zh-CN': '码位置',
        },
        tip: {
          type: 'i18n',
          'en-US': 'Code position. Values: bottom | top',
          'zh-CN': '码位置。取值: bottom | top',
        },
      },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            { title: 'bottom', value: 'bottom' },
            { title: 'Top', value: 'top' },
          ],
        },
      },
      defaultValue: 'bottom',
    },
    {
      name: 'cardInfoDisplay',
      type: 'group',
      display: 'accordion',
      title: {
        label: {
          type: 'i18n',
          'en-US': 'Card Information Display',
          'zh-CN': '卡片信息显示',
        },
      },
      items: [
        {
          name: 'showIcon',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Icon',
              'zh-CN': '图标',
            },
            tip: {
              type: 'i18n',
              'en-US': 'Whether to display icon. Type: boolean',
              'zh-CN': '是否显示图标。类型: boolean',
            },
          },
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showWalletName',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Wallet name',
              'zh-CN': '钱包名称',
            },
            tip: {
              type: 'i18n',
              'en-US': 'Whether to display wallet name. Type: boolean',
              'zh-CN': '是否显示钱包名称。类型: boolean',
            },
          },
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showShopName',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Store name',
              'zh-CN': '店铺名称',
            },
            tip: {
              type: 'i18n',
              'en-US': 'Whether to display store name. Type: boolean',
              'zh-CN': '是否显示店铺名称。类型: boolean',
            },
          },
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showCardNo',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Card number',
              'zh-CN': '卡号',
            },
            tip: {
              type: 'i18n',
              'en-US': 'Whether to display card number. Type: boolean',
              'zh-CN': '是否显示卡号。类型: boolean',
            },
          },
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showCode',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'QR code/Barcode',
              'zh-CN': '二维码/条码图标',
            },
            tip: {
              type: 'i18n',
              'en-US': 'Whether to display QR code/barcode. Type: boolean',
              'zh-CN': '是否显示二维码/条形码图标。类型: boolean',
            },
          },
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showViewPin',
          title: {
            label: {
              type: 'i18n',
              'en-US': 'View PIN',
              'zh-CN': '查看PIN',
            },
            tip: {
              type: 'i18n',
              'en-US':
                'If open, you need to configure the "onViewPinClick" event. Type: boolean',
              'zh-CN': '如果打开需要配置"onViewPinClick"事件。类型: boolean',
            },
          },
          setter: 'BoolSetter',
          defaultValue: false,
        },
        {
          name: "codeType",
          title: {
            label: {
              type: 'i18n',
              'en-US': 'Code Type',
              'zh-CN': '条码类型'
            },
          },
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                { title: '条形码', value: 'barCode' },
                { title: '二维码', value: 'qrCode' },
              ],
            },
          },
          defaultValue: 'qrCode',
        }
      ],
    },
    {
      name: 'guest',
      type: 'group',
      display: 'accordion',
      title: '未登录信息展示',
      items: [
        {
          name: 'title',
          title: { label: '主标题', tip: '主标题' },
          propType: 'string',
          defaultValue: 'Hi Guest, Join Us',
          setter: 'PisellI18nSetter',
        },
        {
          name: 'subtitle',
          title: { label: '副标题', tip: '副标题' },
          propType: 'string',
          defaultValue: 'Unlock perks with every purchase',
          setter: 'TextAreaSetter',
        },
        {
          name: 'align',
          title: {
            label: '对齐方式',
            tip: '内容区域文字对齐方式 left | center',
          },
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                { title: '左对齐', value: 'left' },
                { title: '居中对齐', value: 'center' },
              ],
            },
          },
          defaultValue: 'left',
        },
        {
          name: 'buttonText',
          title: { label: '按钮文本', tip: '按钮文本' },
          propType: 'string',
          defaultValue: 'Sign Up Now',
          setter: 'PisellI18nSetter',
        },
      ],
    },
  ],
  configure: {
    component: { isContainer: false },
    supports: {
      style: true,
      className: true,
      events: ['onClick', 'onCodeClick', 'onViewPinClick'],
    },
  },
};