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

class Sql extends Processor {
  #dsOptionsRef = ref(<any>[]);
  #parameterOptionsRef = ref(<any>[]);
  #sqlQueryResultFieldsRef = ref(<any>[]);
  #editorForm: any;
  #sqlParameterValuesGrid: any;
  #sqlFieldMappingGrid: any;

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

  public getToolbarAction(): any {
    return {
      extend: 'add',
      name: 'sql',
      label: $t('io.sc.engine.rule.core.enums.ProcessorType.' + this.PROCESSOR_TYPE),
      icon: 'bi-filetype-sql',
      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 {
      componentType: 'w-code-mirror',
      attrs: {
        lang: 'sql',
        rows: 4,
        editable: false,
        modelValue: row.sql,
        placeholder: true,
      },
    };
  }

  public getEditorFields(): any {
    return [
      {
        colSpan: 12,
        name: 'sqlDatasourceName',
        label: $t('re.processor.grid.entity.sqlDatasourceName'),
        type: 'w-select',
        clearable: true,
        options: this.#dsOptionsRef,
        rows: 1,
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
      },
      {
        colSpan: 7,
        name: 'sql',
        label: $t('re.processor.grid.entity.sql'),
        type: 'w-code-mirror',
        height: 180,
        lang: 'sql',
        toolbar: false,
        placeholder: true,
        autoCompletion: this.autoCompletionManager.autoCompletion(),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
      },
      {
        colSpan: 5,
        name: 'sqlParameterValues',
        label: $t('re.processor.grid.entity.sqlParameterValues'),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
        type: 'w-grid',
        height: 150,
        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('sql');
              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('sqlParameterValues');
              grid.setLocalData(rows);
            },
          },
          'separator',
          'add',
          'edit',
          [
            {
              extend: 'remove',
              click: (args: any) => {
                const grid = args.grid.getEditorForm().getFieldComponent('sqlParameterValues');
                grid.removeRows(args.selecteds);
              },
            },
            {
              extend: 'remove',
              name: 'removeAll',
              label: $t('deleteAll'),
              click: (args: any) => {
                const grid = args.grid.getEditorForm().getFieldComponent('sqlParameterValues');
                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: 7,
        name: 'sqlQueryResult',
        label: $t('re.processor.grid.entity.sqlQueryResult'),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
        type: 'w-grid',
        height: 250,
        autoFetchData: false,
        title: $t('re.processor.grid.entity.sqlQueryResult'),
        dense: true,
        dndMode: 'local',
        pageable: false,
        checkboxSelection: false,
        configButton: false,
        toolbarConfigure: { noIcon: false },
        toolbarActions: [
          {
            name: 'execute',
            label: $t('execute'),
            icon: 'bi-caret-right',
            click: (args: any) => {
              const datasourceName = this.#editorForm.getFieldValue('sqlDatasourceName');
              const sql = this.#editorForm.getFieldValue('sql');
              const grid = this.#editorForm.getFieldComponent('sqlParameterValues');
              const sqlParameterValues = grid?.getRows();
              let url = '';
              if (this.targetType === Processor.PARAMETER) {
                url = '/api/re/model/parameter/processor/executeSql';
              } else if (this.targetType === Processor.INDICATOR) {
                url = '/api/re/indicator/processor/executeSql';
              }
              noErrorAxios
                .post(Environment.apiContextPath(url), {
                  datasourceName: datasourceName,
                  sql: sql,
                  sqlParameterValues: sqlParameterValues,
                })
                .then((response) => {
                  const fieldMetaDatas: any[] = response.data.fieldMetaDatas;
                  fieldMetaDatas.forEach((field) => {
                    field.value = field.name;
                    field.label = field.name;
                  });
                  const data = response.data.data;
                  const grid = this.#editorForm.getFieldComponent('sqlQueryResult');
                  this.#sqlQueryResultFieldsRef.value = fieldMetaDatas;
                  grid.setLocalData(data);
                })
                .catch((error: any) => {
                  ServerExceptionHandler.setFormValidationErrors(this.#editorForm, error);
                });
            },
          },
        ],
        columns: computed(() => {
          return this.#sqlQueryResultFieldsRef.value;
        }),
      },
      {
        colSpan: 5,
        name: 'sqlFieldMapping',
        label: $t('re.processor.grid.entity.sqlFieldMapping'),
        showIf: (args: any) => {
          return args.form.getFieldValue('type') === this.PROCESSOR_TYPE;
        },
        type: 'w-grid',
        height: 250,
        width: '100%',
        localMode: true,
        autoFetchData: false,
        title: $t('re.processor.grid.entity.sqlFieldMapping'),
        dense: true,
        dbClickOperation: 'edit',
        dndMode: 'local',
        pageable: false,
        configButton: false,
        toolbarConfigure: { noIcon: false },
        toolbarActions: [
          'add',
          'edit',
          [
            {
              extend: 'remove',
              click: (args: any) => {
                const grid = args.grid.getEditorForm().getFieldComponent('sqlFieldMapping');
                grid.removeLocalData(args.selecteds);
              },
            },
            {
              extend: 'remove',
              name: 'removeAll',
              label: $t('deleteAll'),
              click: (args: any) => {
                const grid = args.grid.getEditorForm().getFieldComponent('sqlFieldMapping');
                grid.setLocalData([]);
              },
            },
          ],
        ],
        columns: [
          {
            width: '50%',
            name: 'parameter',
            label: $t('parameterName'),
            sortable: false,
            format: (value: any) => {
              return PlaceHolder.replace(value);
            },
          },
          {
            width: '50%',
            name: 'field',
            label: $t('fieldName'),
            align: 'left',
            sortable: false,
          },
        ],
        editor: {
          dialog: {
            width: '600px',
          },
          form: {
            colsNum: 1,
            fields: [
              {
                name: 'parameter',
                label: $t('parameterName'),
                //type: 'w-select',
                //options: this.#parameterOptionsRef.value,
                toolbar: false,
                type: 'w-code-mirror',
                lang: 'java',
                rows: 1,
                placeholder: true,
                lineWrap: false,
                lineBreak: false,
                autoCompletion: this.autoCompletionManager.autoCompletion(),
                userDefinedFunctions: this.userDefinedFunctionsManager.userDefinedFunctions(),
              },
              {
                name: 'field',
                label: $t('fieldName'),
                type: 'w-input-select',
                options: this.#sqlQueryResultFieldsRef.value,
              },
            ],
          },
        },
      },
    ];
  }

  public getViewerFields(): any {
    return [
      { name: 'sqlDatasourceName', label: $t('re.processor.grid.entity.sqlDatasourceName') },
      { name: 'sql', label: $t('re.processor.grid.entity.sql') },
      { name: 'sqlParameterValues', label: $t('re.processor.grid.entity.sqlParameterValues') },
      { name: 'sqlFieldMapping', label: $t('re.processor.grid.entity.sqlFieldMapping') },
    ];
  }

  public beforeEditorDataSubmit(args: any): void {
    const form = args.grid.getEditorForm();
    const sqlParameterValuesGrid = form.getFieldComponent('sqlParameterValues');
    const sqlParameterValuesLocalData: any[] = sqlParameterValuesGrid.getRows();
    const sqlParameterValues: any[] = [];
    sqlParameterValuesLocalData.forEach((item) => {
      sqlParameterValues.push({
        name: item.name,
        value: item.value,
      });
    });
    args.data.sqlParameterValues = Tools.object2Json(sqlParameterValues);

    const sqlFieldMappingGrid = form.getFieldComponent('sqlFieldMapping');
    const sqlFieldMappingLocalData: any[] = sqlFieldMappingGrid.getRows();
    const sqlFieldMapping: any[] = Tools.objects2Objects(sqlFieldMappingLocalData, { field: 'field', parameter: 'parameter' });
    args.data.sqlFieldMapping = Tools.object2Json(sqlFieldMapping);
  }

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

    this.#editorForm = args.grid.getEditorForm();
    const form = args.grid.getEditorForm();
    const row = args.data;

    axios.get(Environment.apiContextPath('/api/system/datasource')).then((response) => {
      this.#dsOptionsRef.value = Tools.objects2Options(response.data?.content, 'name', 'name');
    });

    let url = '';
    if (this.targetType === Processor.PARAMETER) {
      url = 'api/re/model/parameter/findParametersByParameterId?parameterId=' + this.context.target.id;
    } else if (this.targetType === Processor.INDICATOR) {
      url = 'api/re/indicator/findIndicatorsByIndicatorId?indicatorId=' + this.context.target.id;
    }
    axios.get(Environment.apiContextPath(url)).then((response) => {
      this.#parameterOptionsRef.value = Tools.objects2Objects(response.data, {
        label: 'name',
        value: (parameter: any) => {
          return '${' + parameter.name + '}';
        },
      });
    });

    this.#sqlParameterValuesGrid = form.getFieldComponent('sqlParameterValues');
    const sqlParameterValuesRows = Tools.json2Object(row.sqlParameterValues);
    this.#sqlParameterValuesGrid.setLocalData(sqlParameterValuesRows);

    this.#sqlFieldMappingGrid = form.getFieldComponent('sqlFieldMapping');
    const sqlFieldMappingRows = Tools.json2Object(row.sqlFieldMapping);
    this.#sqlFieldMappingGrid.setLocalData(sqlFieldMappingRows);
  }
}

export { Sql };