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


const VirtualKeyboardMeta: ComponentMetadata = {
  componentName: "VirtualKeyboard",
  title: "VirtualKeyboard",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.3",
    exportName: "VirtualKeyboard",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      title: "others",
      name: "others",
      setter: ["JsonSetter", "VariableSetter"],
    },
    {
      name: 'selectType',
      title: { label: '选择类型', tip: 'selectType | 选择类型' },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            { title: 'Light', value: 'light' },
            { title: 'Dark', value: 'dark' },
          ],
        },
      },
      defaultValue: 'light',
      extraProps: {
        onChange: (value: string, target: any) => {
          // 根据主题切换自动设置颜色
          const isLight = value === 'light';

          target.getProps().setPropValue('backgroundColor', isLight ? '#ffffff' : 'rgba(0, 0, 0, 0.70)');
          target.getProps().setPropValue('containerBackgroundColor', isLight ? '#d0d5dd' : 'rgba(0, 0, 0, 0.40)');
          target.getProps().setPropValue('buttonBackgroundColor', '#ffffff');
          target.getProps().setPropValue('textColor', "#000000");
          target.getProps().setPropValue('keyboardBackgroundColor', isLight ? '#f9f9f9' : 'rgba(0, 0, 0, 0.40)');
          target.getProps().setPropValue('keyboardButtonBackgroundColor', '#ffffff');
          target.getProps().setPropValue('keyboardButtonTextColor', '#000000');
          target.getProps().setPropValue('keyboardButtonHoverColor', '#f5f5f5');
          target.getProps().setPropValue('primaryButtonBackgroundColor', '#4ca30d');
          target.getProps().setPropValue('primaryButtonTextColor', '#ffffff');
        }
      }
    },
    {
      name: "backgroundColor",
      title: {
        label: "背景色",
        tip: "backgroundColor | 背景色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#ffffff",
    },
    {
      name: "containerBackgroundColor",
      title: {
        label: "容器背景色",
        tip: "containerBackgroundColor | 容器背景色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#d0d5dd",
    },
    {
      name: "buttonBackgroundColor",
      title: {
        label: "按钮背景色",
        tip: "buttonBackgroundColor | 按钮背景色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#ffffff",
    },
    {
      name: "textColor",
      title: {
        label: "文本颜色",
        tip: "textColor | 文本颜色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#000000",
    },
    {
      name: "keyboardBackgroundColor",
      title: {
        label: "键盘背景色",
        tip: "keyboardBackgroundColor | 键盘背景色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#f9f9f9",
    },
    {
      name: "keyboardButtonBackgroundColor",
      title: {
        label: "键盘按钮背景色",
        tip: "keyboardButtonBackgroundColor | 键盘按钮背景色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#ffffff",
    },
    {
      name: "keyboardButtonTextColor",
      title: {
        label: "键盘按钮文本颜色",
        tip: "keyboardButtonTextColor | 键盘按钮文本颜色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#000000",
    },
    {
      name: "keyboardButtonHoverColor",
      title: {
        label: "键盘按钮悬停颜色",
        tip: "keyboardButtonHoverColor | 键盘按钮悬停颜色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#f5f5f5",
    },
    {
      name: "primaryButtonBackgroundColor",
      title: {
        label: "主要按钮背景色",
        tip: "primaryButtonBackgroundColor | 主要按钮背景色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#4ca30d",
    },
    {
      name: "primaryButtonTextColor",
      title: {
        label: "主要按钮文本颜色",
        tip: "primaryButtonTextColor | 主要按钮文本颜色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#ffffff",
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: "onClick",
          template:
            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
        },
      ],
    },
    component: {
      isContainer: true,
    },
  },
};
const snippets: Snippet[] = [
  {
    title: "VirtualKeyboard",
    screenshot: "",
    schema: {
      componentName: "VirtualKeyboard",
      props: {},
    },
  },
];

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