import snippets from "./snippets";

const ButtonMeta = {
  componentName: "Button",
  title: "按钮",
  /** todo: category属性的多语言不生效 后续组件面板自己实现时加入 */
  category: "通用",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "Button",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: "i18n",
            "en-US": "Feature",
            "zh-CN": "功能",
          },
        },
        display: "block",
        type: "group",
        items: [
          {
            name: "children",
            title: {
              label: {
                type: "i18n",
                "en-US": "content",
                "zh-CN": "内容",
              },
              tip: "children",
            },
            propType: {
              type: "oneOfType",
              value: ["node", "string"],
            },
            setter: ["SlotSetter", "PisellI18nSetter", "VariableSetter"],
          },
          {
            name: "htmlType",
            title: {
              label: {
                type: "i18n",
                "en-US": "native type",
                "zh-CN": "原生类型",
              },
              tip: {
                type: "i18n",
                "en-US": "htmlType | Set the native `type` value of `button`",
                "zh-CN": "htmlType | 设置 `button` 原生的 `type` 值",
              },
            },
            propType: {
              type: "oneOf",
              value: ["submit", "reset", "button"],
            },
            setter: [
              {
                componentName: "RadioGroupSetter",
                props: {
                  options: [
                    {
                      title: "Submit",
                      value: "submit",
                    },
                    {
                      title: "Reset",
                      value: "reset",
                    },
                    {
                      title: "Button",
                      value: "button",
                    },
                  ],
                },
              },
              "VariableSetter",
            ],
            defaultValue: "button",
          },
          {
            name: 'className',
            title: {
              label: '样式类名',
              tip: 'className | 样式类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: "href",
            title: {
              label: {
                type: "i18n",
                "en-US": "jump address",
                "zh-CN": "跳转地址",
              },
              tip: {
                type: "i18n",
                "en-US":
                  "href | click to jump to the address, specify this attribute button behavior is consistent with a link",
                "zh-CN":
                  "href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致",
              },
            },
            propType: "string",
            setter: ["StringSetter", "VariableSetter"],
          },
          {
            name: "target",
            title: {
              label: "Target",
              tip: {
                type: "i18n",
                "en-US":
                  "target | Equivalent to the target attribute of a link, effective when href exists",
                "zh-CN":
                  "target | 相当于 a 链接的 target 属性，href 存在时生效",
              },
            },
            propType: {
              type: "oneOf",
              value: ["_self", "_blank", "_parent", "_top"],
            },
            setter: [
              {
                componentName: "SelectSetter",
                props: {
                  options: [
                    {
                      title: "本窗口跳转",
                      value: "_self",
                    },
                    {
                      title: "打开新标签页",
                      value: "_blank",
                    },
                    {
                      title: "父窗口跳转",
                      value: "_parent",
                    },
                    {
                      title: "顶层窗口跳转",
                      value: "_top",
                    },
                  ],
                },
              },
              "StringSetter",
              "VariableSetter",
            ],
            condition: {
              type: "JSFunction",
              value:
                'target => !!target.getProps().getPropValue("href")?.trim()',
            },
          },
        ],
      },
      {
        title: {
          type: "i18n",
          "en-US": "exterior",
          "zh-CN": "外观",
        },
        display: "block",
        type: "group",
        items: [
          {
            name: "type",
            title: {
              label: "type",
              tip: "set button type",
            },
            propType: {
              type: "oneOf",
              value: ["primary", "default", "ghost", "dashed", "danger", "link", "text"],
            },
            setter: [
              {
                componentName: "SelectSetter",
                props: {
                  options: [
                    {
                      title: "primary button",
                      value: "primary",
                    },
                    {
                      title: "default button",
                      value: "default",
                    },
                    {
                      title: "dashed button",
                      value: "dashed",
                    },
                    {
                      title: "danger button",
                      value: "danger",
                    },
                    {
                      title: "link button",
                      value: "link",
                    },
                    {
                      title: "text button",
                      value: "text",
                    },
                  ],
                },
              },
              "VariableSetter",
            ],
          },
          {
            name: "size",
            title: {
              label: "size",
              tip: "set button size",
            },
            propType: { type: "oneOf", value: ["large", "middle", "small"] },
            setter: [
              {
                componentName: "RadioGroupSetter",
                props: {
                  options: [
                    {
                      title: "large",
                      value: "large",
                    },
                    {
                      title: "middle",
                      value: "middle",
                    },
                    {
                      title: "small",
                      value: "small",
                    },
                  ],
                },
              },
              "VariableSetter",
            ],
            defaultValue: "middle",
          },
          {
            name: "shape",
            title: {
              label: "shape",
              tip: "shape | Set button shape, optional value is `circle`, `round` or not set",
            },
            propType: { type: "oneOf", value: ["default", "circle", "round"] },
            defaultValue: "default",
            setter: [
              {
                componentName: "RadioGroupSetter",
                props: {
                  options: [
                    {
                      title: "default",
                      value: "default",
                    },
                    {
                      title: "circle",
                      value: "circle",
                    },
                    {
                      title: "round",
                      value: "round",
                    },
                  ],
                },
              },
              "VariableSetter",
            ],
          },
          {
            name: "icon",
            title: {
              label: {
                type: "i18n",
                "en-US": "icon",
                "zh-CN": "图标",
              },
              tip: "icon | Set the icon component of the button",
            },
            propType: { type: "oneOfType", value: ["node"] },
            setter: [{
              componentName: "SlotSetter",
              initialValue: {
                type: "JSSlot",
                value: [
                  {
                    componentName: "Icon",
                    props: {
                      type: "SmileOutlined",
                      size: 20,
                      rotate: 0,
                      spin: false,
                    },
                  },
                ],
              },
              defaultValue: null
            }],
          },
          {
            name: "rightIcon",
            title: {
              label: {
                type: "i18n",
                "en-US": "Right icon",
                "zh-CN": "右侧图标",
              },
              tip: "icon | Set the icon component of the button",
            },
            propType: { type: "oneOfType", value: ["node"] },
            setter: [{
              componentName: "SlotSetter",
              initialValue: {
                type: "JSSlot",
                value: [
                  {
                    componentName: "Icon",
                    props: {
                      type: "SmileOutlined",
                      size: 20,
                      rotate: 0,
                      spin: false,
                    },
                  },
                ],
              },
              defaultValue: null
            }],
          },
          {
            name: "block",
            title: {
              label: {
                type: "i18n",
                "en-US": "adaptive",
                "zh-CN": "自适应",
              },
              tip: {
                type: "i18n",
                "en-US":
                  "block | Option to adjust button width to its parent width",
                "zh-CN": "block | 将按钮宽度调整为其父宽度的选项",
              },
            },
            propType: "bool",
            setter: "BoolSetter",
            defaultValue: false,
          },
          {
            name: "danger",
            title: {
              label: {
                type: "i18n",
                "en-US": "danger button",
                "zh-CN": "危险按钮",
              },
              tip: {
                type: "i18n",
                "en-US": "danger | set hazard button",
                "zh-CN": "danger | 设置危险按钮",
              },
            },
            propType: "bool",
            setter: "BoolSetter",
            defaultValue: false,
          },
          {
            name: "ghost",
            title: {
              label: {
                type: "i18n",
                "en-US": "ghost attribute",
                "zh-CN": "幽灵属性",
              },
              tip: {
                type: "i18n",
                "en-US":
                  "ghost | Ghost property to make button background transparent",
                "zh-CN": "ghost | 幽灵属性，使按钮背景透明",
              },
            },
            propType: "bool",
            setter: "BoolSetter",
            defaultValue: false,
          },
        ],
      },

      {
        title: {
          type: "i18n",
          "en-US": "state",
          "zh-CN": "状态",
        },
        display: "block",
        type: "group",
        items: [
          {
            name: "loading",
            title: {
              label: {
                type: "i18n",
                "en-US": "loading status",
                "zh-CN": "载入状态",
              },
              tip: {
                type: "i18n",
                "en-US": "loading | Set button loading state",
                "zh-CN": "loading | 设置按钮载入状态",
              },
            },
            propType: "bool",
            setter: ["BoolSetter", "VariableSetter"],
          },
          {
            name: "disabled",
            title: {
              label: {
                type: "i18n",
                "en-US": "Whether to disable",
                "zh-CN": "是否禁用",
              },
              tip: {
                type: "i18n",
                "en-US": "disabled | Is it disabled",
                "zh-CN": "disabled | 是否为禁用状态",
              },
            },
            propType: "bool",
            setter: ["BoolSetter", "VariableSetter"],
            defaultValue: false,
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: "onClick",
          template:
            "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}",
        },
      ],
    },
    component: {},
  },
};

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