import { h } from 'vue';
import {
  JavascriptEditorWithTestModal,
  ScriptEditorValueType,
} from '../../../designer/src/components/JavaScriptFilterModal';
import { FormSchema, useComponentRegister } from '/@/components/Form';
import { Dropdown } from '/@/components/Dropdown';
import { Tag, Tooltip } from 'ant-design-vue';
import Icon from '/@/components/Icon';
import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
import { findDictItemByCode } from '/@/api/system/dict';
import { DeviceTypeEnum } from '../../../dataFlow/cpns/config';
import { useI18n } from '/@/hooks/web/useI18n';
import { handeleCopy } from '/@/views/device/profiles/step/topic';

useComponentRegister('JavascriptEditorWithTestModal', JavascriptEditorWithTestModal);

export enum FormFieldsEnum {
  Name = 'name',
  Description = 'description',
  ScriptContent = 'scriptContent',
  ServiceType = 'serviceType',
}

export interface FormFieldsValueType {
  [FormFieldsEnum.Name]: string;
  [FormFieldsEnum.ScriptContent]: ScriptEditorValueType;
  [FormFieldsEnum.Description]?: string;
  [FormFieldsEnum.ServiceType]?: string;
  scriptType: string;
}

const { t } = useI18n();
export const formSchemas: FormSchema[] = [
  {
    label: t('rule.script.index.name'),
    field: FormFieldsEnum.Name,
    component: 'Input',
    required: true,
    componentProps: {
      placeholder: t('rule.script.index.pleaseInputScriptName'),
      maxLength: 32,
    },
  },
  {
    label: t('rule.script.index.scriptType'),
    field: 'scriptType',
    show: false,
    component: 'Input',
    defaultValue: 'TRANSPORT_TCP_UP',
  },
  {
    label: t('rule.script.index.scriptServiceType'),
    field: FormFieldsEnum.ServiceType,
    component: 'ApiRadioGroup',
    required: true,
    colProps: {
      span: 14,
    },
    defaultValue: 'GATEWAY',
    componentProps: ({ formModel }) => {
      return {
        api: findDictItemByCode,
        params: {
          dictCode: 'device_type',
        },
        labelField: 'itemText',
        valueField: 'itemValue',
        onChange(e) {
          const { jsScript, tbelScript, scriptLang } = (formModel[FormFieldsEnum.ScriptContent] ||
            {}) as ScriptEditorValueType;

          const { JavaScript, TBEL } =
            e === DeviceTypeEnum.SENSOR || e === DeviceTypeEnum.DIRECT_CONNECTION
              ? getDirectWithSensorScript()
              : getGatewayScript();

          formModel[FormFieldsEnum.ScriptContent] = {
            scriptLang,
            jsScript: scriptLang === ScriptLanguageEnum.JavaScript ? JavaScript : jsScript,
            tbelScript: scriptLang === ScriptLanguageEnum.TBEL ? TBEL : tbelScript,
          };
        },
      };
    },
  },

  {
    label: '',
    field: FormFieldsEnum.ScriptContent,
    component: 'JavascriptEditorWithTestModal',
    componentProps: {
      buttonName: t('rule.script.index.test'),
      javaScriptEditorProps: {
        functionName: 'Transform',
        paramsName: ['msg', 'metadata', 'msgType'],
        scriptType: 'update',
      },
      messageValue: {
        params: '010304026C00883BF0',
      },
      beforeTest: (params: Recordable) => {
        return { ...params, needMetadataAndMsgType: true };
      },
    },
    defaultValue: {
      scriptLang: ScriptLanguageEnum.JavaScript,
      jsScript: getGatewayScript().JavaScript,
      tbelScript: getGatewayScript().TBEL,
    } as ScriptEditorValueType,
    changeEvent: 'update:value',
    valueField: 'value',
    renderComponentContent: ({ model }) => {
      return {
        beforeFormat: ({ scriptLanguage }) => [
          h(Tooltip, { title: t('rule.script.index.scriptExample') }, () =>
            h(
              Dropdown,
              {
                trigger: ['click'],
                dropMenuList: [
                  {
                    text: t('rule.script.index.dictAndSensorExample'),
                    event: 'directWithSensor',
                    onClick: () => {
                      const { JavaScript, TBEL } = getDirectWithSensorScript();
                      const { jsScript, tbelScript } = (model[FormFieldsEnum.ScriptContent] ||
                        {}) as ScriptEditorValueType;
                      model[FormFieldsEnum.ScriptContent] = {
                        scriptLang: scriptLanguage,
                        jsScript:
                          scriptLanguage === ScriptLanguageEnum.JavaScript ? JavaScript : jsScript,
                        tbelScript: scriptLanguage === ScriptLanguageEnum.TBEL ? TBEL : tbelScript,
                      };
                    },
                  },
                  {
                    text: t('rule.script.index.gatewayExample'),
                    event: 'gateway',
                    onClick: () => {
                      const { JavaScript, TBEL } = getGatewayScript();
                      const { jsScript, tbelScript } = (model[FormFieldsEnum.ScriptContent] ||
                        {}) as ScriptEditorValueType;
                      model[FormFieldsEnum.ScriptContent] = {
                        scriptLang: scriptLanguage,
                        jsScript:
                          scriptLanguage === ScriptLanguageEnum.JavaScript ? JavaScript : jsScript,
                        tbelScript: scriptLanguage === ScriptLanguageEnum.TBEL ? TBEL : tbelScript,
                      };
                    },
                  },
                ],
              },
              () =>
                h(
                  Tag,
                  { color: '#2a79ef', class: 'cursor-pointer' },
                  {
                    icon: () =>
                      h(Icon, {
                        icon: 'magic',
                        prefix: 'mdi',
                        size: 14,
                        class: 'cursor-pointer svg:text-sm',
                      }),
                    default: () => t('rule.script.index.scriptExample'),
                  }
                )
            )
          ),
          h(Tooltip, { title: t('common.copyText') }, () =>
            h(Icon, {
              icon: 'copy-filled',
              prefix: 'ant-design',
              class: 'cursor-pointer',
              onClick: () =>
                handeleCopy(
                  scriptLanguage === ScriptLanguageEnum.JavaScript
                    ? model[FormFieldsEnum.ScriptContent]?.jsScript
                    : model[FormFieldsEnum.ScriptContent]?.tbelScript
                ),
            })
          ),
        ],
      };
    },
  },
  {
    field: FormFieldsEnum.Description,
    label: t('common.remarkText'),
    component: 'InputTextArea',
    componentProps: {
      placeholder: t('common.inputText') + t('common.remarkText'),
    },
  },
];

function getDirectWithSensorScript() {
  const JavaScript = `
  var teleData = {};
  var params = msg['params'];
  /*物模型数据(可选)：原始数据*/
  teleData.source = params;
  /*直连设备：tempVal是产品物模型中所定义属性的标识符*/
  var tempVal = params;
  /*物模型温度标识符*/
  teleData.temp = (parseInt('0x'+tempVal.substr(10, 4))*0.1).toFixed(2);
  /*物模型湿度标识符*/
  teleData.wet = (parseInt('0x'+tempVal.substr(6, 4))*0.1).toFixed(2);
  /*物模型开关标识符*/
  teleData.switch = parseInt('0x'+tempVal.substr(7, 1));
  msg.datas = teleData;
  /*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
  msg.telemetry = true;
  delete msg.params
  /*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
  return {msg: msg};`;

  const TBEL = `
  var teleData = {};
  var params = msg['params'];
  /*物模型数据(可选)：原始数据*/
  teleData.source = params;
  /*直连设备：tempVal是产品物模型中所定义属性的标识符*/
  var tempVal = params;
  /*物模型温度标识符得出的值136除以10*/
  teleData.temp = parseFloat(Integer.parseInt(tempVal.substring(10, 14), 16))/10;
  /*物模型湿度标识符*/
  teleData.wet = parseFloat(Integer.parseInt(tempVal.substring(6, 10), 16))/10;
  /*物模型开关标识符*/
  teleData.switch = Integer.parseInt(tempVal.substring(7, 8), 16);
  msg.datas = teleData;
  /*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
  msg.telemetry = true;
  msg.remove('params');
  /*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
  return {msg: msg};`;

  return { JavaScript, TBEL };
}

function getGatewayScript() {
  const JavaScript = `
  var params = msg['params'];
  /*网关上行脚本*/
  var teleData = {};
  /*物模型数据(可选)：原始数据*/
  teleData.source = params;
  /*网关设备：slaveDevice是网关子设备的“设备标识”*/
  var slaveDevice = params.substr(0, 2);
  teleData[slaveDevice] = params;
  msg.datas = teleData;
  msg.telemetry = true;
  /*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
  delete msg.params;
  return {msg: msg};
  `;

  const TBEL = `
  var params = msg['params'];
  /*网关上行脚本*/
  var teleData = {};
  /*物模型数据(可选)：原始数据*/
  teleData.source = params;
  /*网关设备：slaveDevice是网关子设备的“设备标识”*/
  var slaveDevice = params.substring(0, 2);
  teleData[slaveDevice] = params;
  msg.datas = teleData;
  msg.telemetry = true;
  /*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
  msg.remove('params');
  return {msg: msg};`;

  return { JavaScript, TBEL };
}