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

const PisellPriceKeyboardMeta: ComponentMetadata = {
  componentName: 'PisellPriceKeyboard',
  title: 'PisellPriceKeyboard',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.3',
    exportName: 'PisellPriceKeyboard',
    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',
    },
    {
      title: {
        label: '金额配置',
      },
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'amountProps.precision',
          title: {
            label: '小数点后位数',
            tip: '小数点后位数 默认是小数点后2位',
          },
          propType: 'number',
          setter: 'NumberSetter',
        },
        {
          name: 'amountProps.showCurrencySymbol',
          title: {
            label: '显示货币符号',
            tip: '显示货币符号 指的是 ¥$ 等货币符号等显隐，默认是展示',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'amountProps.useThousandsSeparator',
          title: {
            label: '千分位',
            tip: '千分位 指的是长金额的千分位逗号隔开，比如“123, 245, 315” 这种展现形式，默认是关闭',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'presets',
          title: {
            label: '快捷金额',
            tip: '快捷金额',
          },
          setter: {
            componentName: 'ArraySetter',
            props: {
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  config: {
                    items: [
                      {
                        name: 'value',
                        title: 'value',
                        setter: 'StringSetter',
                        isRequired: true,
                      },
                      {
                        name: 'label',
                        title: 'label',
                        setter: 'StringSetter',
                        isRequired: true,
                      },
                    ],
                  },
                },
                initialValue: () => {
                  return {
                    value: '100',
                    label: '100',
                  };
                },
              },
            },
          },
        },
      ],
    },
    {
      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: 'PisellPriceKeyboard',
    screenshot: '',
    schema: {
      componentName: 'PisellPriceKeyboard',
      props: {},
    },
  },
];

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