import snippets from './snippets';

const PisellFindMeta = {
  componentName: 'PisellFind',
  title: 'Find 查找',
  category: 'Plus Components',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.0',
    exportName: 'PisellFind',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Basic Config',
            'zh-CN': '基础配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'triggerType',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Trigger Type',
                'zh-CN': '触发器类型',
              },
              tip: '查找触发方式',
            },
            propType: {
              type: 'oneOf',
              value: ['input', 'button', 'icon', 'text'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '按钮', value: 'button' },
                    { title: '输入框', value: 'input' },
                    { title: '图标', value: 'icon' },
                    { title: '文本', value: 'text' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'button',
          },
          {
            name: 'placeholder',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Placeholder',
                'zh-CN': '占位符',
              },
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
            defaultValue: '请输入搜索内容',
          },
          {
            name: 'buttonText',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Button Text',
                'zh-CN': '按钮文本',
              },
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
            defaultValue: 'Find',
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("triggerType") === "button"',
            },
          },
          {
            name: 'size',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Size',
                'zh-CN': '尺寸',
              },
            },
            propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '大号', value: 'large' },
                    { title: '默认', value: 'middle' },
                    { title: '小号', value: 'small' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'middle',
          },
          {
            name: 'disabled',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Disabled',
                'zh-CN': '是否禁用',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Search History',
            'zh-CN': '搜索历史',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'showHistory',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Search History',
                'zh-CN': '显示搜索历史',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'historyKey',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'History Storage Key',
                'zh-CN': '历史记录存储 Key',
              },
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
            defaultValue: 'pisell_find_history',
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("showHistory")',
            },
          },
          {
            name: 'maxHistoryCount',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Max History Count',
                'zh-CN': '历史记录上限',
              },
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 10,
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("showHistory")',
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Display Config',
            'zh-CN': '展示配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'displayType',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Display Type',
                'zh-CN': '展示类型',
              },
              tip: '不指定时根据触发器类型智能判断',
            },
            propType: {
              type: 'oneOf',
              value: ['inline', 'popup', 'modal', 'drawer', 'detached'],
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    { title: '弹窗展示', value: 'modal' },
                    { title: '内联展示', value: 'inline' },
                    { title: '浮层展示', value: 'popup' },
                    { title: '抽屉展示', value: 'drawer' },
                    { title: '独立展示', value: 'detached' },
                  ],
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'modalWidth',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Modal Width',
                'zh-CN': 'Modal 宽度',
              },
            },
            propType: { type: 'oneOfType', value: ['string', 'number'] },
            setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
            defaultValue: 834,
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("displayType") === "modal"',
            },
          },
          {
            name: 'mask',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Mask',
                'zh-CN': '显示遮罩层',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Advanced Config',
            'zh-CN': '高级配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'showConfirmButton',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Confirm Button',
                'zh-CN': '显示确认按钮',
              },
              tip: '默认关闭，输入即搜索',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'debounceTime',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Debounce Time',
                'zh-CN': '防抖时间',
              },
              tip: '防抖时间（毫秒）',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 300,
          },
          {
            name: 'showScan',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Scan Button',
                'zh-CN': '显示扫码按钮',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'clearOnClose',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Clear On Close',
                'zh-CN': '关闭时清空关键词',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
    ],
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onSearch',
          template:
            'onSearch(keyword,${extParams}){\n// 搜索触发回调\n// 在此处过滤数据并更新列表\nconst filtered = data.filter(item => item.name.includes(keyword));\nsetFilteredData(filtered);}',
        },
        {
          name: 'onChange',
          template:
            'onChange(value,${extParams}){\n// 关键词变化回调\nconsole.log("onChange", value);}',
        },
        {
          name: 'onOpen',
          template:
            'onOpen(${extParams}){\n// 查找面板打开回调\nconsole.log("onOpen");}',
        },
        {
          name: 'onClose',
          template:
            'onClose(${extParams}){\n// 查找面板关闭回调\nconsole.log("onClose");}',
        },
      ],
    },
    component: {},
  },
};

export default {
  ...PisellFindMeta,
  snippets,
};