import snippets from './snippets';

const PisellLookupMeta = {
  componentName: 'PisellLookup',
  title: 'Lookup 搜索',
  category: 'Pro Components',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.0',
    exportName: 'PisellLookup',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Trigger 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: 'input' },
                    { title: '按钮', value: 'button' },
                    { title: '图标', value: 'icon' },
                    { title: '文本', value: 'text' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'input',
          },
          {
            name: 'trigger',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Custom Trigger',
                'zh-CN': '自定义触发器',
              },
              tip: '自定义触发器（与 triggerType 互斥）',
            },
            propType: { type: 'node' },
            setter: 'SlotSetter',
          },
          {
            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'],
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("triggerType") === "button"',
            },
          },
          {
            name: 'triggerText',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Trigger Text',
                'zh-CN': '触发器文本',
              },
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("triggerType") === "text"',
            },
          },
          {
            name: 'triggerIcon',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Trigger Icon',
                'zh-CN': '触发器图标',
              },
            },
            propType: { type: 'node' },
            setter: 'SlotSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("triggerType") === "icon"',
            },
          },
          {
            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,
          },
          {
            name: 'showPrefixIcon',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Prefix Icon',
                'zh-CN': '显示前缀图标',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'prefixIcon',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Prefix Icon',
                'zh-CN': '前缀图标',
              },
            },
            propType: { type: 'node' },
            setter: 'SlotSetter',
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("showPrefixIcon")',
            },
          },
          {
            name: 'showClear',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Clear Button',
                'zh-CN': '显示清除按钮',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'showConfirmButton',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Confirm Button',
                'zh-CN': '显示确认按钮',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'confirmButtonText',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Confirm Button Text',
                'zh-CN': '确认按钮文本',
              },
            },
            propType: 'string',
            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
            defaultValue: 'Lookup',
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("showConfirmButton")',
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Search Behavior',
            'zh-CN': '搜索行为',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'searchMode',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Search Mode',
                'zh-CN': '搜索模式',
              },
              tip: 'realtime: 实时搜索，confirm: 确认触发',
            },
            propType: { type: 'oneOf', value: ['realtime', 'confirm'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '实时搜索', value: 'realtime' },
                    { title: '确认触发', value: 'confirm' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'realtime',
          },
          {
            name: 'debounceTime',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Debounce Time',
                'zh-CN': '防抖时间',
              },
              tip: '防抖时间（毫秒）',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 300,
          },
          {
            name: 'value',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Value (Controlled)',
                'zh-CN': '搜索关键词（受控）',
              },
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'defaultValue',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Default Value',
                'zh-CN': '默认关键词',
              },
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'showScan',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Scan Button',
                'zh-CN': '显示扫码按钮',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Auxiliary Features',
            '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: false,
          },
          {
            name: 'historyKey',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'History Storage Key',
                'zh-CN': '历史记录存储 Key',
              },
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
            defaultValue: 'pisell_lookup_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")',
            },
          },
          {
            name: 'showSuggestions',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Suggestions',
                'zh-CN': '显示联想词',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'showHotWords',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Hot Words',
                'zh-CN': '显示热门搜索',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Result Display',
            '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: 'inline' },
                    { title: '浮层展示', value: 'popup' },
                    { title: '弹窗展示', value: 'modal' },
                    { title: '抽屉展示', value: 'drawer' },
                    { title: '独立展示', value: 'detached' },
                  ],
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'resultRender',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Result Render',
                'zh-CN': '结果渲染',
              },
              tip: '自定义结果渲染函数',
            },
            propType: { type: 'func' },
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'resultRender(keyword, onClose, ${extParams}){\n// 渲染搜索结果\nreturn (<div>搜索: {keyword}</div>);\n}',
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'loading',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Loading',
                'zh-CN': '加载状态',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'emptyRender',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Empty Render',
                'zh-CN': '空状态渲染',
              },
            },
            propType: { type: 'func' },
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'emptyRender(${extParams}){\n// 渲染空状态\nreturn (<div>暂无数据</div>);\n}',
                },
              },
              'VariableSetter',
            ],
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Container Style',
            'zh-CN': '容器样式',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            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: 'drawerWidth',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Drawer Width',
                'zh-CN': 'Drawer 宽度',
              },
            },
            propType: { type: 'oneOfType', value: ['string', 'number'] },
            setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
            defaultValue: 378,
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("displayType") === "drawer"',
            },
          },
          {
            name: 'drawerPlacement',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Drawer Placement',
                'zh-CN': 'Drawer 位置',
              },
            },
            propType: { type: 'oneOf', value: ['left', 'right', 'top', 'bottom'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '左侧', value: 'left' },
                    { title: '右侧', value: 'right' },
                    { title: '顶部', value: 'top' },
                    { title: '底部', value: 'bottom' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'right',
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("displayType") === "drawer"',
            },
          },
          {
            name: 'popupWidth',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Popup Width',
                'zh-CN': 'Popup 宽度',
              },
            },
            propType: { type: 'oneOfType', value: ['string', 'number'] },
            setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("displayType") === "popup"',
            },
          },
          {
            name: 'maskClosable',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Mask Closable',
                'zh-CN': '点击遮罩关闭',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'zIndex',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Z-Index',
                'zh-CN': '层级',
              },
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Visibility Control',
            'zh-CN': '可见性控制',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'visible',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Visible (Controlled)',
                'zh-CN': '是否可见（受控）',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
          },
          {
            name: 'defaultVisible',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Default Visible',
                'zh-CN': '默认是否可见',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'mask',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Show Mask',
                'zh-CN': '显示遮罩层',
              },
              tip: '是否显示遮罩层（Modal/Drawer）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'clearOnClose',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Clear On Close',
                'zh-CN': '关闭时清空关键词',
              },
              tip: '关闭时是否清空关键词，false 表示保留关键词并在打开时自动选中',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Custom Render',
            'zh-CN': '自定义渲染',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'historyRender',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'History Render',
                'zh-CN': '历史记录渲染',
              },
            },
            propType: { type: 'func' },
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'historyRender(history, onSelect, ${extParams}){\n// 自定义历史记录渲染\nreturn null;\n}',
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'suggestionsRender',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Suggestions Render',
                'zh-CN': '联想词渲染',
              },
            },
            propType: { type: 'func' },
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'suggestionsRender(suggestions, onSelect, ${extParams}){\n// 自定义联想词渲染\nreturn null;\n}',
                },
              },
              'VariableSetter',
            ],
          },
          {
            name: 'hotWordsRender',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Hot Words Render',
                'zh-CN': '热门搜索渲染',
              },
            },
            propType: { type: 'func' },
            setter: [
              {
                componentName: 'FunctionSetter',
                props: {
                  template:
                    'hotWordsRender(hotWords, onSelect, ${extParams}){\n// 自定义热门搜索渲染\nreturn null;\n}',
                },
              },
              'VariableSetter',
            ],
          },
        ],
      },
    ],
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onChange',
          template:
            'onChange(value,${extParams}){\n// 关键词变化回调\nconsole.log("onChange", value);}',
        },
        {
          name: 'onSearch',
          template:
            'onSearch(keyword,${extParams}){\n// 搜索触发回调\nconsole.log("onSearch", keyword);}',
        },
        {
          name: 'onScan',
          template:
            'onScan(code,${extParams}){\n// 扫码完成回调\nconsole.log("onScan", code);}',
        },
        {
          name: 'onLoadHistory',
          template:
            'onLoadHistory(${extParams}){\n// 加载历史记录回调\nreturn [];}',
        },
        {
          name: 'onSaveHistory',
          template:
            'onSaveHistory(history,${extParams}){\n// 保存历史记录回调\nconsole.log("onSaveHistory", history);}',
        },
        {
          name: 'onLoadSuggestions',
          template:
            'onLoadSuggestions(keyword,${extParams}){\n// 加载联想词回调\nreturn [];}',
        },
        {
          name: 'onLoadHotWords',
          template:
            'onLoadHotWords(${extParams}){\n// 加载热门搜索回调\nreturn [];}',
        },
        {
          name: 'onVisibleChange',
          template:
            'onVisibleChange(visible,${extParams}){\n// 可见性变化回调\nconsole.log("onVisibleChange", visible);}',
        },
        {
          name: 'onOpen',
          template:
            'onOpen(${extParams}){\n// 打开回调\nconsole.log("onOpen");}',
        },
        {
          name: 'onClose',
          template:
            'onClose(${extParams}){\n// 关闭回调\nconsole.log("onClose");}',
        },
      ],
    },
    component: {},
  },
};

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