import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Button, Tag } from 'ant-design-vue';
import moment from 'moment';
// import {
//   ClearAlarmFieldsEnum,
//   ClearAlarmFieldsNameEnum,
// } from '../../designer/enum/formField/action';
import { useComponentRegister } from '/@/components/Form';
import { JavascriptEditorWithTestModal } from '../../designer/src/components/JavaScriptFilterModal';
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n(); // 加载国际化
import { ScriptLanguageEnum } from '/@/enums/scriptEnum';
import { doQueryRuleChainList } from '/@/api/device/deviceConfigApi';
import { RuleChainRecord } from '/@/api/device/model/deviceConfigModel';
import { useGo } from '/@/hooks/web/usePage';

useComponentRegister('JavascriptEditorWithTestModal', JavascriptEditorWithTestModal);

export enum StatusEnum {
  ENABLE = 1,
  DISABLE = 0,
}

export enum ScriptMessageTypeEnum {
  'Post attributes' = 'POST_ATTRIBUTES',
  'Post telemetry' = 'POST_TELEMETRY',
  'RPC Request from Device' = 'RPC_REQUEST_FROM_DEVICE',
  'RPC Request to Device' = 'RPC_REQUEST_TO_DEVICE',
  'Activity Event' = 'ACTIVITY_EVENT',
  'Inactivity Event' = 'INACTIVITY_EVENT',
  'Connect Event' = 'CONNECT_EVENT',
  'Disconnect Event' = 'DISCONNECT_EVENT',
  'Entity Created' = 'ENTITY_CREATED',
  'Entity Updated' = 'ENTITY_UPDATED',
  'Entity Deleted' = 'ENTITY_DELETED',
  'Entity Assigned' = 'ENTITY_ASSIGNED',
  'Entity Unassigned' = 'ENTITY_UNASSIGNED',
  'Attributes Updated' = 'ATTRIBUTES_UPDATED',
  'Attributes Deleted' = 'ATTRIBUTES_DELETED',
  'Timeseries Updated' = 'TIMESERIES_UPDATED',
  'Timeseries Deleted' = 'TIMESERIES_DELETED',
  'RPC Queued' = 'RPC_QUEUED',
  'RPC Delivered' = 'RPC_DELIVERED',
  'RPC Successful' = 'RPC_SUCCESSFUL',
  'RPC Timeout' = 'RPC_TIMEOUT',
  'RPC Failed' = 'RPC_FAILED',
}

export const columns: BasicColumn[] = [
  {
    title: t('rule.script.index.formName'),
    dataIndex: 'name',
    width: 100,
  },
  {
    title: t('rule.script.index.type'),
    dataIndex: 'type',
    width: 200,
    customRender: () => h(Tag, { color: 'blue' }, () => t('common.messageFormat')),
  },
  {
    title: t('deviceManagement.product.ruleChainText'),
    dataIndex: 'ruleChainName',
    width: 200,
    customRender: ({ text, record }) => {
      const go = useGo();

      return h(
        Button,
        {
          type: 'link',
          onClick: () => {
            go(`/rule/chain/${record?.ruleChainId}`);
          },
        },
        () => text
      );
    },
  },
  {
    title: t('rule.script.index.singleStatus'),
    dataIndex: 'status',
    width: 120,
    slots: { customRender: 'status' },
  },
  {
    title: t('rule.script.index.createTime'),
    dataIndex: 'createTime',
    width: 180,
  },
];

export const searchFormSchema = (syncValue: Fn): FormSchema[] => {
  return [
    {
      field: 'name',
      label: t('rule.script.index.formName'),
      component: 'Input',
      colProps: { span: 6 },
      componentProps: {
        maxLength: 36,
        placeholder: t('rule.script.index.pleaseInputName'),
        onChange(event: Event) {
          const value = (event.target as HTMLInputElement).value;
          syncValue({ name: value });
        },
      },
    },
    {
      field: 'status',
      label: t('rule.script.index.singleStatus'),
      component: 'Select',
      componentProps: {
        placeholder: t('rule.script.index.pleaseSelectStatus'),
        options: [
          { label: t('common.enabledText'), value: StatusEnum.ENABLE },
          { label: t('common.notEnabledText'), value: StatusEnum.DISABLE },
        ],
        onChange(value: number) {
          syncValue({ status: value });
        },
      },
      colProps: { span: 6 },
    },
    {
      field: 'createTime',
      label: t('rule.script.index.createTime'),
      component: 'RangePicker',
      colProps: { span: 8 },
      componentProps: {
        showTime: {
          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
        },
        onChange(value: [moment.Moment, moment.Moment]) {
          if (value.length && value.length === 2)
            syncValue({ startTime: value[0].format('x'), endTime: value[1].format('x') });
        },
      },
    },
  ];
};

export const formSchema: FormSchema[] = [
  {
    field: 'name',
    label: t('rule.script.index.formName'),
    required: true,
    component: 'Input',
    componentProps: {
      maxLength: 32,
      placeholder: t('rule.script.index.pleaseInputName'),
    },
  },
  {
    field: 'ruleChainId',
    label: t('deviceManagement.product.ruleChainText'),
    required: true,
    component: 'ApiSelect',
    componentProps: ({ formActionType, formModel }) => {
      return {
        api: async () => {
          const result = await doQueryRuleChainList();
          return result.map((item) => ({ ...item, value: item.id.id }));
        },
        labelField: 'name',
        valueFiled: 'value',
        onOptionsChange(options: RuleChainRecord[]) {
          if (formModel?.ruleChainId) return;
          const root = options.find((item) => item.root);
          root && formActionType.setFieldsValue({ ruleChainId: root.id.id });
        },
      };
    },
  },
  {
    field: 'remark',
    label: t('rule.script.index.description'),
    component: 'InputTextArea',
    componentProps: {
      maxLength: 255,
      autoSize: { minRows: 5, maxRows: 8 },
      placeholder: t('rule.script.index.pleaseInputDescription'),
    },
  },
  // {
  //   field: 'function',
  //   label: '',
  //   component: 'Input',
  //   slot: 'function',
  // },
  {
    field: 'function',
    component: 'JavascriptEditorWithTestModal',
    label: t('rule.script.index.conversionFunction'),
    changeEvent: 'update:value',
    defaultValue: {
      jsScript: 'return {msg: msg, metadata: metadata, msgType: msgType};',
      scriptLang: ScriptLanguageEnum.JavaScript,
      tbelScript: 'return {msg: msg, metadata: metadata, msgType: msgType};',
    },
    componentProps: {
      javaScriptEditorProps: {
        functionName: 'Details',
        paramsName: ['msg', 'metadata', 'msgType'],
        scriptType: 'json',
      },
      buttonName: t('rule.script.index.testConversionFunction'),
    },
  },
  {
    field: 'id',
    label: 'id',
    component: 'Input',
    ifShow: false,
  },
];