import { ref, computed } from 'vue';
import { axios, Environment, $t, Tools, EnumTools, Options } from 'platform-core';
import { Processor } from '../Processor';
import { PlaceHolder } from '@/utils/PlaceHolder';

class HttpRequest extends Processor {
  #editorForm: any;
  #httpResponseBodyRef = ref(undefined);
  #httpMethodTypeEnum: any;
  #httpMethodTypeOptionsRef = ref(<any>[]);
  #HttpAuthorizationTypeEnum: any;
  #httpAuthorizationTypeOptionsRef = ref(<any>[]);

  constructor(targetType: string, context?: any) {
    super(targetType, context);
    this.PROCESSOR_TYPE = 'HTTP_REQUEST';
    this.EDITOR_DIALOG_WIDTH = 1024;
  }

  public getToolbarAction(): any {
    return {
      extend: 'add',
      name: 'http',
      label: $t('io.sc.engine.rule.core.enums.ProcessorType.' + this.PROCESSOR_TYPE),
      icon: 'sync_alt',
      enableIf: (args: any) => {
        const valueType = this.context.target.valueType;
        return valueType !== 'io.sc.engine.rule.core.SingleRuleResult' && valueType !== 'io.sc.engine.rule.core.RuleSetResult';
      },
      afterClick: (args: any) => {
        args.grid.getEditorForm().setFieldValue('type', this.PROCESSOR_TYPE);
      },
    };
  }

  public format(row: any): any {
    return row.httpMethod + ', ' + PlaceHolder.replace(row.httpUrl);
  }

  public getEditorFields(): any {
    return [
      {
        colSpan: 2,
        name: 'httpMethod',
        label: $t('re.processor.grid.entity.httpMethod'),
        type: 'w-select',
        options: this.#httpMethodTypeOptionsRef,
        rows: 1,
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
      },
      {
        colSpan: 2,
        name: 'httpAuthType',
        label: $t('re.processor.grid.entity.httpAuthType'),
        type: 'w-select',
        options: this.#httpAuthorizationTypeOptionsRef,
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
      },
      {
        colSpan: 4,
        name: 'httpAuthApikey',
        label: $t('re.processor.grid.entity.httpAuthApikey'),
        type: 'w-text',
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE && args.form.getFieldValue('httpAuthType') === 'API_KEY';
        },
      },
      {
        colSpan: 4,
        name: 'httpAuthApiValue',
        label: $t('re.processor.grid.entity.httpAuthApiValue'),
        type: 'w-text',
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE && args.form.getFieldValue('httpAuthType') === 'API_KEY';
        },
      },
      {
        colSpan: 4,
        name: 'httpAuthBasicUsername',
        label: $t('re.processor.grid.entity.httpAuthBasicUsername'),
        type: 'w-text',
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE && args.form.getFieldValue('httpAuthType') === 'BASIC_AUTH';
        },
      },
      {
        colSpan: 4,
        name: 'httpAuthBasicPassword',
        label: $t('re.processor.grid.entity.httpAuthBasicPassword'),
        type: 'w-text',
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE && args.form.getFieldValue('httpAuthType') === 'BASIC_AUTH';
        },
      },
      {
        colSpan: 8,
        name: 'httpAuthBearerToken',
        label: $t('re.processor.grid.entity.httpAuthBearerToken'),
        type: 'w-text',
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE && args.form.getFieldValue('httpAuthType') === 'BEARER';
        },
      },
      {
        colSpan: 6,
        firstCol: true,
        name: 'httpUrl',
        label: $t('re.processor.grid.entity.httpUrl'),
        type: 'w-code-mirror',
        lang: 'javascript',
        rows: 7,
        toolbar: false,
        placeholder: true,
        lineWrap: true,
        lineBreak: true,
        lineHeight: '1.3rem',
        fontSize: '0.75rem',
        autoCompletion: this.autoCompletionManager.autoCompletion(),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
      },
      {
        colSpan: 6,
        name: 'urlParameterValues',
        label: $t('re.processor.grid.entity.sqlParameterValues'),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
        type: 'w-grid',
        height: 110,
        title: $t('re.processor.grid.entity.sqlParameterValues'),
        localMode: true,
        autoFetchData: false,
        dense: true,
        dbClickOperation: 'edit',
        dndMode: 'local',
        pageable: false,
        configButton: false,
        toolbarConfigure: { noIcon: false },
        toolbarActions: [
          {
            name: 'analyze',
            label: $t('analyze'),
            icon: 'bi-tag',
            click: (args: any) => {
              const sql = this.#editorForm.getFieldValue('httpUrl');
              const regex = /\$\{[\u0000-\uFFFF]+?\}/g;
              const array: any[] = sql.match(regex);
              const rows: any[] = [];
              array.forEach((item) => {
                rows.push({ name: item, value: '' });
              });
              const grid = this.#editorForm.getFieldComponent('urlParameterValues');
              grid.setLocalData(rows);
            },
          },
          'separator',
          'add',
          'edit',
          [
            {
              extend: 'remove',
              click: (args: any) => {
                const grid = args.grid.getEditorForm().getFieldComponent('urlParameterValues');
                grid.removeRows(args.selecteds);
              },
            },
            {
              extend: 'remove',
              name: 'removeAll',
              label: $t('deleteAll'),
              click: (args: any) => {
                const grid = args.grid.getEditorForm().getFieldComponent('urlParameterValues');
                grid.setLocalData([]);
              },
            },
          ],
        ],
        columns: [
          {
            width: '50%',
            name: 'name',
            label: $t('name'),
            align: 'left',
            sortable: false,
            format: (value: any) => {
              return PlaceHolder.replace(value);
            },
          },
          {
            width: '100%',
            name: 'value',
            label: $t('value'),
            sortable: false,
          },
        ],
        editor: {
          dialog: {
            width: '600px',
          },
          form: {
            colsNum: 1,
            fields: [
              {
                name: 'name',
                label: $t('name'),
                type: 'w-code-mirror',
                toolbar: false,
                lang: 'java',
                rows: 1,
                placeholder: true,
                autoCompletion: this.autoCompletionManager.autoCompletion(),
              },
              {
                name: 'value',
                label: $t('value'),
                type: 'w-text',
              },
            ],
          },
        },
      },
      {
        colSpan: 6,
        name: 'httpRequestBody',
        label: $t('re.processor.grid.entity.httpRequestBody'),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
        type: 'w-code-mirror',
        rows: 7,
        toolbar: false,
        lineNumber: false,
        lang: 'json',
        lineWrap: false,
        lineBreak: true,
        placeholder: true,
        autoCompletion: this.autoCompletionManager.autoCompletion(),
        userDefinedFunctions: this.userDefinedFunctionsManager.userDefinedFunctions(),
      },
      {
        colSpan: 6,
        name: 'bodyParameterValues',
        label: $t('re.processor.grid.entity.sqlParameterValues'),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
        type: 'w-grid',
        height: 110,
        title: $t('re.processor.grid.entity.sqlParameterValues'),
        localMode: true,
        autoFetchData: false,
        dense: true,
        dbClickOperation: 'edit',
        dndMode: 'local',
        pageable: false,
        configButton: false,
        toolbarConfigure: { noIcon: false },
        toolbarActions: [
          {
            name: 'send',
            label: $t('send'),
            icon: 'bi-send',
            click: (args: any) => {
              const httpMethod = this.#editorForm.getFieldValue('httpMethod');
              const httpUrl = this.#editorForm.getFieldValue('httpUrl');
              const httpAuthType = this.#editorForm.getFieldValue('httpAuthType');
              const httpAuthApikey = this.#editorForm.getFieldValue('httpAuthApikey');
              const httpAuthApiValue = this.#editorForm.getFieldValue('httpAuthApiValue');
              const httpAuthBasicUsername = this.#editorForm.getFieldValue('httpAuthBasicUsername');
              const httpAuthBasicPassword = this.#editorForm.getFieldValue('httpAuthBasicPassword');
              const httpAuthBearerToken = this.#editorForm.getFieldValue('httpAuthBearerToken');
              const httpRequestBody = this.#editorForm.getFieldValue('httpRequestBody');

              axios
                .post(Environment.apiContextPath('/api/re/indicator/processor/sendWebRequest'), {
                  httpMethod,
                  httpUrl,
                  httpAuthType,
                  httpAuthApikey,
                  httpAuthApiValue,
                  httpAuthBasicUsername,
                  httpAuthBasicPassword,
                  httpAuthBearerToken,
                  httpRequestBody,
                })
                .then((response) => {
                  const result = response.data;
                  if (result.successful) {
                    this.#httpResponseBodyRef.value = result.content;
                  } else {
                    this.#httpResponseBodyRef.value = result.status + ',' + result.error;
                  }
                });
            },
          },
          'separator',
          {
            name: 'analyze',
            label: $t('analyze'),
            icon: 'bi-tag',
            click: (args: any) => {
              const sql = this.#editorForm.getFieldValue('httpRequestBody');
              const regex = /\$\{[\u0000-\uFFFF]+?\}/g;
              const array: any[] = sql.match(regex);
              const rows: any[] = [];
              array.forEach((item) => {
                rows.push({ name: item, value: '' });
              });
              const grid = this.#editorForm.getFieldComponent('bodyParameterValues');
              grid.setLocalData(rows);
            },
          },
          'separator',
          'add',
          'edit',
          [
            {
              extend: 'remove',
              click: (args: any) => {
                const grid = args.grid.getEditorForm().getFieldComponent('bodyParameterValues');
                grid.removeRows(args.selecteds);
              },
            },
            {
              extend: 'remove',
              name: 'removeAll',
              label: $t('deleteAll'),
              click: (args: any) => {
                const grid = args.grid.getEditorForm().getFieldComponent('bodyParameterValues');
                grid.setLocalData([]);
              },
            },
          ],
        ],
        columns: [
          {
            width: '50%',
            name: 'name',
            label: $t('name'),
            align: 'left',
            sortable: false,
            format: (value: any) => {
              return PlaceHolder.replace(value);
            },
          },
          {
            width: '100%',
            name: 'value',
            label: $t('value'),
            sortable: false,
          },
        ],
        editor: {
          dialog: {
            width: '600px',
          },
          form: {
            colsNum: 1,
            fields: [
              {
                name: 'name',
                label: $t('name'),
                type: 'w-code-mirror',
                toolbar: false,
                lang: 'java',
                rows: 1,
                placeholder: true,
                autoCompletion: this.autoCompletionManager.autoCompletion(),
              },
              {
                name: 'value',
                label: $t('value'),
                type: 'w-text',
              },
            ],
          },
        },
      },
      {
        colSpan: 12,
        name: 'httpResponseBody',
        label: $t('re.processor.grid.entity.httpResponseBody'),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
        type: 'w-code-mirror',
        lang: 'json',
        rows: 4,
        lineHeight: '1.3rem',
        fontSize: '0.75rem',
        toolbar: false,
        lineNumber: false,
        lineWrap: false,
        lineBreak: true,
        modelValue: this.#httpResponseBodyRef.value,
      },
      {
        colSpan: 12,
        name: 'httpResponseMapping',
        label: $t('re.processor.grid.entity.httpResponseMapping'),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
        type: 'w-code-mirror',
        rows: 5,
        toolbar: false,
        lineNumber: false,
        lineHeight: '1.3rem',
        fontSize: '0.75rem',
        lang: 'java',
        lineWrap: false,
        lineBreak: true,
        placeholder: true,
        autoCompletion: this.autoCompletionManager.autoCompletion(),
        userDefinedFunctions: this.userDefinedFunctionsManager.userDefinedFunctions(),
        defaultValue:
          'if(${response}.getSuccessful()){\n\t//def object =new groovy.xml.XmlParser().parse(${response}.getContent());\n\tdef object = new groovy.json.JsonSlurper().parseText(${response}.getContent());\n}',
      },
    ];
  }

  public getViewerFields(): any {
    return [
      { name: 'httpMethod', label: $t('re.processor.grid.entity.httpMethod') },
      { name: 'httpUrl', label: $t('re.processor.grid.entity.httpUrl') },
      { name: 'httpAuthType', label: $t('re.processor.grid.entity.httpAuthType') },
      { name: 'httpAuthApikey', label: $t('re.processor.grid.entity.httpAuthApikey') },
      { name: 'httpAuthApiValue', label: $t('re.processor.grid.entity.httpAuthApiValue') },
      { name: 'httpAuthBasicUsername', label: $t('re.processor.grid.entity.httpAuthBasicUsername') },
      { name: 'httpAuthBasicPassword', label: $t('re.processor.grid.entity.httpAuthBasicPassword') },
      { name: 'httpAuthBearerToken', label: $t('re.processor.grid.entity.httpAuthBearerToken') },
      { name: 'httpRequestBody', label: $t('re.processor.grid.entity.httpRequestBody') },
      { name: 'httpResponseMapping', label: $t('re.processor.grid.entity.httpResponseMapping') },
    ];
  }

  public beforeEditorDataSubmit(args: any): void {}

  public afterEditorOpen(args: any) {
    args.grid.getEditorDialog().setWidth(this.EDITOR_DIALOG_WIDTH);
    this.initAutoCompletionManager();
    this.initUserDefinedFunctionsManager();

    this.#editorForm = args.grid.getEditorForm();
    EnumTools.fetch(['io.sc.engine.rule.core.enums.HttpMethodType', 'io.sc.engine.rule.core.enums.HttpAuthorizationType']).then((value) => {
      this.#httpMethodTypeEnum = value.HttpMethodType;
      this.#httpMethodTypeOptionsRef.value = Options.enum(this.#httpMethodTypeEnum);
      this.#HttpAuthorizationTypeEnum = value.HttpAuthorizationType;
      this.#httpAuthorizationTypeOptionsRef.value = Options.enum(this.#HttpAuthorizationTypeEnum);
    });
  }
}

export { HttpRequest };