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


const PisellNumberKeyboardMeta: ComponentMetadata = {
  componentName: "PisellNumberKeyboard",
  title: "PisellNumberKeyboard",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.3",
    exportName: "PisellNumberKeyboard",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      name: "defaultValue",
      title: { label: "默认值", tip: "默认值" },
      propType: "number",
      setter: "NumberSetter",
    },
    {
      name: "max",
      title: { label: "最大值", tip: "最大值" },
      propType: "number",
      setter: "NumberSetter",
    },
    {
      name: "min",
      title: { label: "最小值", tip: "最小值" },
      propType: "number",
      setter: "NumberSetter",
    },
    {
      name: "doneText",
      title: { label: "确认按钮文案", tip: "确认按钮文案" },
      propType: "string",
      defaultValue: "Done",
      setter: "PisellI18nSetter",
    },
    {
      name: "resetText",
      title: { label: "重置按钮文案", tip: "重置按钮文案" },
      propType: "string",
      defaultValue: "Reset",
      setter: "PisellI18nSetter",
    },
    {
      name: "placeholder",
      title: { label: "展位文字placeholder", tip: "placeholder" },
      propType: "string",
      setter: "PisellI18nSetter",
    },
    {
      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('resetButtonBackgroundColor', '#ffffff');
          target.getProps().setPropValue('resetButtonTextColor', "#d92d20");
          target.getProps().setPropValue('doneButtonBackgroundColor', "#4ca30d");
          target.getProps().setPropValue('doneButtonTextColor', "#ffffff");
          target.getProps().setPropValue('isDoneButtonFollowTheme', true);
          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');
        }
      }
    },
    {
      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: "resetButtonBackgroundColor",
      title: {
        label: "重置按钮背景色",
        tip: "resetButtonBackgroundColor | 重置按钮背景色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#ffffff",
    },
    {
      name: "resetButtonTextColor",
      title: {
        label: "重置按钮文本颜色",
        tip: "resetButtonTextColor | 重置按钮文本颜色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#d92d20",
    },
    {
      name: 'isDoneButtonFollowTheme',
      title: { label: 'Done按钮颜色跟随主题色', tip: 'isDoneButtonFollowTheme | Done按钮颜色跟随主题色' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter'
    },
    {
      name: "doneButtonBackgroundColor",
      title: {
        label: "Done按钮背景色",
        tip: "doneButtonBackgroundColor | Done按钮背景色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#4ca30d",
      condition(target: any) {
        return !target.getProps().getPropValue("isDoneButtonFollowTheme");
      },
    },
    {
      name: "doneButtonTextColor",
      title: {
        label: "Done按钮文本颜色",
        tip: "doneButtonTextColor | Done按钮文本颜色",
      },
      propType: "string",
      setter: "ColorSetter",
      defaultValue: "#ffffff",
      condition(target: any) {
        return !target.getProps().getPropValue("isDoneButtonFollowTheme");
      },
    },
    {
      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",
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: "onClick",
          template:
            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
        },
        {
          name: "onChange",
          template:
            "onChange(value,${extParams}){\nconsole.log('onChange', value);}",
        },
        {
          name: "onEnter",
          template:
            "onEnter(value,${extParams}){\nconsole.log('onEnter', value);}",
        },
      ],
    },
    component: {
      isContainer: true,
    },
  },
};
const snippets: Snippet[] = [
  {
    title: "PisellNumberKeyboard",
    screenshot: "",
    schema: {
      componentName: "PisellNumberKeyboard",
      props: {},
    },
  },
];

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