import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types';
import snippets from './snippets';

const MultilevelCardMeta: IPublicTypeComponentMetadata = {
  componentName: 'PisellCards.MultilevelCard',
  title: '多层级卡片',
  category: '数据展示',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellCards',
    main: 'src/index.tsx',
    destructuring: true,
    subName: 'MultilevelCard',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Slot Configuration',
            'zh-CN': '插槽配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'card',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Main Card',
                'zh-CN': '主卡片',
              },
              tip: {
                type: 'i18n',
                'en-US': 'card | The main card component (e.g., TextCard, GraphicTextCard)',
                'zh-CN': 'card | 主卡片组件（如 TextCard、GraphicTextCard 等）',
              },
            },
            propType: { type: 'oneOfType', value: ['node'] },
            setter: [
              {
                componentName: "SlotSetter",
                title: "渲染函数插槽",
                initialValue: {
                  type: "JSSlot",
                  params: ["props"],
                  value: [

                  ],
                },
                defaultValue: {
                  type: "JSSlot",
                  params: ["props"],
                  value: [

                  ],
                },
              },
              {
                componentName: "FunctionSetter",
                props: {
                  template:
                    "renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}",
                },
              },
              "VariableSetter",
            ],
          },
          {
            name: 'panel',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Secondary Panel',
                'zh-CN': '次级面板',
              },
              tip: {
                type: 'i18n',
                'en-US': 'panel | Content displayed when the card is active',
                'zh-CN': 'panel | 主卡片激活时显示的内容',
              },
            },
            propType: { type: 'oneOfType', value: ['node'] },
            setter: [
              {
                componentName: "SlotSetter",
                title: "渲染函数插槽",
                initialValue: {
                  type: "JSSlot",
                  params: ["props"],
                  value: [

                  ],
                },
                defaultValue: {
                  type: "JSSlot",
                  params: ["props"],
                  value: [

                  ],
                },
              },
              {
                componentName: "FunctionSetter",
                props: {
                  template:
                    "renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}",
                },
              },
              "VariableSetter",
            ],
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Trigger Configuration',
            'zh-CN': '触发方式配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'trigger',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Trigger Mode',
                'zh-CN': '触发方式',
              },
              tip: {
                type: 'i18n',
                'en-US': 'trigger | Trigger mode: click or hover',
                'zh-CN': 'trigger | 触发方式：点击或悬停',
              },
            },
            propType: { type: 'oneOf', value: ['click', 'hover'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: 'Click',
                      value: 'click',
                    },
                    {
                      title: 'Hover',
                      value: 'hover',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'click',
          },
          {
            name: 'hoverDelay',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Hover Delay',
                'zh-CN': 'Hover 延迟',
              },
              tip: {
                type: 'i18n',
                'en-US': 'hoverDelay | Delay time for hover mode (ms)',
                'zh-CN': 'hoverDelay | hover 模式下的延迟时间（毫秒）',
              },
            },
            propType: 'object',
            setter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'enter',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Enter Delay',
                          'zh-CN': '进入延迟',
                        },
                      },
                      setter: 'NumberSetter',
                      defaultValue: 100,
                    },
                    {
                      name: 'leave',
                      title: {
                        label: {
                          type: 'i18n',
                          'en-US': 'Leave Delay',
                          'zh-CN': '离开延迟',
                        },
                      },
                      setter: 'NumberSetter',
                      defaultValue: 200,
                    },
                  ],
                },
              },
            },
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("trigger") === "hover"',
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Panel Configuration',
            'zh-CN': '次级面板配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'panelWidthMode',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Width Mode',
                'zh-CN': '宽度模式',
              },
              tip: {
                type: 'i18n',
                'en-US': 'panelWidthMode | Width mode of the secondary panel',
                'zh-CN': 'panelWidthMode | 次级面板的宽度模式',
              },
            },
            propType: { type: 'oneOf', value: ['auto', 'fixed', 'full'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: 'Auto',
                      value: 'auto',
                    },
                    {
                      title: 'Fixed',
                      value: 'fixed',
                    },
                    {
                      title: 'Full',
                      value: 'full',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'full',
          },
          {
            name: 'panelWidth',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Panel Width',
                'zh-CN': '面板宽度',
              },
              tip: {
                type: 'i18n',
                'en-US': 'panelWidth | Fixed width value (effective when panelWidthMode is "fixed")',
                'zh-CN': 'panelWidth | 固定宽度值（当 panelWidthMode 为 "fixed" 时有效）',
              },
            },
            propType: { type: 'oneOfType', value: ['number', 'string'] },
            setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("panelWidthMode") === "fixed"',
            },
          },
          {
            name: 'panelStyle',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Panel Style',
                'zh-CN': '面板样式',
              },
              tip: {
                type: 'i18n',
                'en-US': 'panelStyle | Custom style of the secondary panel',
                'zh-CN': 'panelStyle | 次级面板的自定义样式',
              },
            },
            propType: 'object',
            setter: 'StyleSetter',
          },
          {
            name: 'panelClassName',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Panel Class',
                'zh-CN': '面板类名',
              },
              tip: {
                type: 'i18n',
                'en-US': 'panelClassName | Custom class name of the secondary panel',
                'zh-CN': 'panelClassName | 次级面板的自定义类名',
              },
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Animation Configuration',
            'zh-CN': '动画配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'animation',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Enable Animation',
                'zh-CN': '启用动画',
              },
              tip: {
                type: 'i18n',
                'en-US': 'animation | Whether to enable expand/collapse animation',
                'zh-CN': 'animation | 是否启用展开/收起动画',
              },
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'animationDuration',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Animation Duration',
                'zh-CN': '动画时长',
              },
              tip: {
                type: 'i18n',
                'en-US': 'animationDuration | Animation duration (ms)',
                'zh-CN': 'animationDuration | 动画持续时间（毫秒）',
              },
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 300,
            condition: {
              type: 'JSFunction',
              value: 'target => target.getProps().getPropValue("animation") !== false',
            },
          },
        ],
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'Basic Configuration',
            'zh-CN': '基础配置',
          },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'className',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Class Name',
                'zh-CN': '类名',
              },
              tip: {
                type: 'i18n',
                'en-US': 'className | Component class name',
                'zh-CN': 'className | 组件类名',
              },
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'style',
            title: {
              label: {
                type: 'i18n',
                'en-US': 'Style',
                'zh-CN': '样式',
              },
              tip: {
                type: 'i18n',
                'en-US': 'style | Component style',
                'zh-CN': 'style | 组件样式',
              },
            },
            propType: 'object',
            setter: 'StyleSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onExpandChange',
          template:
            "onExpandChange(expanded,${extParams}){\n// 展开状态变化回调\nconsole.log('onExpandChange', expanded);}",
        },
        {
          name: 'onPanelMount',
          template:
            "onPanelMount(${extParams}){\n// 次级面板渲染完成回调\nconsole.log('onPanelMount');}",
        },
        {
          name: 'onPanelUnmount',
          template:
            "onPanelUnmount(${extParams}){\n// 次级面板卸载回调\nconsole.log('onPanelUnmount');}",
        },
      ],
    },
    component: {
      isContainer: false,
    },
  },
};

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


