import {
  ComponentMetadata,
  IPublicModelSettingField,
  Snippet,
} from "@alilc/lowcode-types";

const ComponentMeta: ComponentMetadata = {
  componentName: "Component",
  title: {
    type: "i18n",
    "en-US": "Component",
    "zh-CN": "低代码业务组件",
  },
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.11",
    exportName: "Component",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  configure: {
    props: [
      {
        name: "___propTypes___",
        title: "属性定义（propTypes）",
        setter: {
          componentName: "ArraySetter",
          props: {
            itemSetter: {
              componentName: "ObjectSetter",
              props: {
                config: {
                  items: [
                    {
                      name: "title",
                      title: {
                        label: "属性标题",
                        tip: "title",
                      },
                      setter: "StringSetter",
                      initialValue: "我是标题",
                      supportVariable: true,
                      isRequired: true,
                    },
                    {
                      name: "name",
                      title: {
                        label: "属性名称",
                        tip: "name",
                      },
                      setter: "StringSetter",
                      initialValue: "属性名称",
                      supportVariable: true,
                      isRequired: true,
                    },
                    {
                      name: "type",
                      title: {
                        label: "属性类型",
                        tip: "type",
                      },
                      setter: {
                        componentName: "SelectSetter",
                        props: {
                          options: [
                            {
                              title: "文本",
                              value: "string",
                            },
                            {
                              title: "布尔",
                              value: "boolean",
                            },
                            {
                              title: "数字",
                              value: "number",
                            },
                            {
                              title: "对象",
                              value: "object",
                            },
                            {
                              title: "数组",
                              value: "array",
                            },
                            {
                              title: "函数",
                              value: "function",
                            },
                            {
                              title: "元素",
                              value: "element",
                            },
                          ],
                          placeholder: "请选择",
                        },
                        initialValue: "string",
                      },
                      initialValue: "属性类型",
                      supportVariable: true,
                    },
                    {
                      name: "setter",
                      title: {
                        label: "设置器",
                        tip: "setter",
                      },
                      setter: {
                        componentName: "SelectSetter",
                        props: {
                          options: [
                            {
                              title: "ArraySetter",
                              value: "ArraySetter",
                            },
                            {
                              title: "BoolSetter",
                              value: "BoolSetter",
                            },
                            {
                              title: "ColorSetter",
                              value: "ColorSetter",
                            },
                            {
                              title: "EventSetter",
                              value: "EventSetter",
                            },
                            {
                              title: "FunctionSetter",
                              value: "FunctionSetter",
                            },
                            {
                              title: "IconSetter",
                              value: "IconSetter",
                            },
                            {
                              title: "MixedSetter",
                              value: "MixedSetter",
                            },
                            {
                              title: "NumberSetter",
                              value: "NumberSetter",
                            },
                            {
                              title: "RadioGroupSetter",
                              value: "RadioGroupSetter",
                            },
                            {
                              title: "SelectSetter",
                              value: "SelectSetter",
                            },
                            {
                              title: "SlotSetter",
                              value: "SlotSetter",
                            },
                            {
                              title: "StringSetter",
                              value: "StringSetter",
                            },
                            {
                              title: "StyleSetter",
                              value: "StyleSetter",
                            },
                            {
                              title: "TextAreaSetter",
                              value: "TextAreaSetter",
                            },
                            {
                              title: "VariableSetter",
                              value: "VariableSetter",
                            },
                          ],
                          placeholder: "请选择",
                        },
                        initialValue: "string",
                      },
                      supportVariable: true,
                    },
                    {
                      name: "defaultValue",
                      title: {
                        label: "默认值",
                        tip: "defaultValue",
                      },
                      setter: {
                        componentName: (target) => {
                          return target.parent?.getPropValue?.('setter') || "StringSetter";
                        }
                      },
                    },
                    {
                      name: "display",
                      title: {
                        label: "布局",
                        tip: "display",
                      },
                      setter: {
                        componentName: "RadioGroupSetter",
                        props: {
                          options: [
                            {
                              title: "块",
                              value: "block",
                            },
                            {
                              title: "行内",
                              value: "inline",
                            },
                          ],
                        },
                        initialValue: "block",
                      },
                      initialValue: "block",
                      supportVariable: true,
                    },
                    {
                      name: "tipContent",
                      title: {
                        label: "帮助说明",
                        tip: "tipContent",
                      },
                      setter: "StringSetter",
                    },
                  ],
                },
              },
              initialValue: () => {
                return {
                  title: "属性标题",
                  name: "属性名称",
                  type: "string",
                  setter: "StringSetter",
                  display: "block",
                };
              },
            },
          },
        },
        extraProps: {
          getValue: (target: IPublicModelSettingField, value: any) => {
            // console.log(target, target.getProps(), value, "getValue");
            return value;
          },
          setValue: (target: IPublicModelSettingField, value: any) => {
            // console.log(target, value, "setValue");
            return value;
          },
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {
      isContainer: true,
      // isPage: true,
    },
  },
};

const snippets: Snippet[] = [
  {
    title: "Component",
    screenshot: "",
    schema: {
      componentName: "Component",
      props: {},
    },
  },
];

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