import { mergeParameters } from '../../base/utils';
import React from 'react';
import { IOTCustomProps,IOTCustomJson} from '.';
import {
  ComponentsType,
  iProperty,
  TagType,
} from '../../base/type';
import iGrapesJSConfig from '../../type';
import IOTCustom from './IOTCustom';

const grapesJSConfig: iGrapesJSConfig<IOTCustomJson, IOTCustomProps> = {
  type: [ComponentsType.Custom],
  id: 'IOTCustom',
  tag: TagType.IOTCustom,
  access: 'r',
  render: (jsonData, ...args) => {
    const props = mergeParameters(jsonData, ...args);
    return <IOTCustom {...props}></IOTCustom>;
  },

  buildData: (mock: boolean = false, property?: iProperty) => {
    if (property === undefined) return;

    //区分类
    const props: IOTCustomJson = {
      title: property['display-name'],
      streamId: property.streamName,
      type: property?.valuedef?.type,
      disabled: false,
    }
    return props;
  },
  traits: () => {
    return [
      {
        type: 'text',
        name: 'title',
        label: '组件名',
        placeholder: '仅支持英文大小写及数字',
        getValidString : (text: string) => {
          const re = /[a-zA-Z0-9]+/;
          const result = re.exec(text);
          if (result) {
            return result[0];
          } else {
            return '';
          }
        },
      },
    ];
  },
};

export default grapesJSConfig;