import { $t, axios, Environment, Tools, MarkupTableUtil } from 'platform-core';
import { Processor } from '../Processor';
import { PlaceHolder } from '@/utils/PlaceHolder';
import { ValueTypeUtil } from '@/utils/ValueTypeUtil';

class ObjectProperties extends Processor {
  public getToolbarAction(target: any): any {
    return {
      extend: 'add',
      name: 'objectProperties',
      label: $t('io.sc.engine.rule.core.enums.ProcessorType.OBJECT_PROPERTIES'),
      icon: 'bi-list-task',
      enableIf: (args: any) => {
        return !ValueTypeUtil.isBase(target.valueType);
      },
      afterClick: (args: any) => {
        args.grid.getEditorForm().setFieldValue('type', 'OBJECT_PROPERTIES');
      },
    };
  }

  public format(row: any): any {
    let str = '';
    if (row.objectCondition) {
      str += `<div class='py-2'>When ` + PlaceHolder.replace(row.objectCondition) + ' Then</div>';
    }
    const objs = Tools.json2Object(row.objectProperties);
    if (objs) {
      let body = '';
      objs.forEach((obj: any) => {
        body += '<tr>';
        body += `	<td width='30%'>` + obj.name + `</td>`;
        body += `	<td width='70%'><span>` + ('' + PlaceHolder.replace(obj.expression)) + '</span></td>';
        body += '</tr>';
      });
      str += MarkupTableUtil.markupTable('', body, { 'max-height': '200px' });
    }
    return str;
  }

  public getEditorFields(context?: any): any {
    return [
      {
        colSpan: 5,
        name: 'objectCondition',
        label: $t('re.resources.designer.processor.grid.entity.objectCondition'),
        type: 'w-code-mirror',
        lang: 'java',
        rows: 3,
        lineWrap: true,
        lineBreak: false,
        autoCompletion: this.autoCompletionManager.autoCompletion(),
        userDefinedFunctions: this.userDefinedFunctionsManager.userDefinedFunctions(),
        showIf: (args: any) => {
          return 'OBJECT_PROPERTIES' === args.form.getFieldValue('type');
        },
      },
      {
        colSpan: 5,
        name: 'objectProperties',
        label: $t('re.resources.designer.processor.grid.entity.objectProperties'),
        showIf: (args: any) => {
          return 'OBJECT_PROPERTIES' === args.form.getFieldValue('type');
        },
        type: 'w-grid',
        title: $t('re.resources.designer.processor.grid.entity.objectProperties'),
        height: 400,
        autoFetchData: false,
        dbClickOperation: 'edit',
        dense: true,
        draggable: 'local',
        pageable: false,
        configButton: false,
        toolbarConfigure: { noIcon: false },
        toolbarActions: [
          'separator',
          {
            name: 'autoMatch',
            label: $t('autoMatch'),
            icon: 'bi-link-45deg',
            click: (args: any) => {
              const localData = args.grid.getRows();
              const objectProperties: any[] = [];
              localData.forEach((item: any) => {
                objectProperties.push({
                  code: item.code,
                  name: item.name,
                  expression: item.expression,
                });
              });
              context.objectPropertiesMatcherDialogRef.open(objectProperties);
            },
          },
          'edit',
          {
            extend: 'remove',
            click: (args: any) => {
              const selecteds: any[] = args.selecteds;
              selecteds.forEach((selected) => {
                selected.expression = '';
                args.grid.updateLocalData(selected);
              });
            },
          },
          'separator',
          {
            extend: 'remove',
            name: 'removeAll',
            label: $t('removeAll'),
            icon: 'bi-trash3',
            enableIf: () => {
              return true;
            },
            click: (args: any) => {
              const rows: any[] = args.grid.getRows();
              rows.forEach((row) => {
                row.expression = '';
              });
              args.grid.setLocalData(rows);
            },
          },
        ],
        primaryKey: 'code',
        columns: [
          { name: 'code', label: 'code', hidden: true },
          {
            width: 300,
            name: 'name',
            label: $t('propertyName'),
            align: 'left',
            sortable: false,
            format: (value: any, row: any) => {
              if (row.expression) {
                const expression = row.expression.replace(/\$\{(.+?)\.(.+?)\}/g, '$2');
                if (expression.trim() !== value.trim()) {
                  return `<span class='text-red-500'>` + value + '</span>';
                }
              }
              return value;
            },
          },
          {
            width: '100%',
            name: 'expression',
            label: $t('expression'),
            sortable: false,
            format: (value: any) => {
              return PlaceHolder.replace(value);
            },
          },
        ],
        editor: {
          dialog: {
            width: '800px',
          },
          form: {
            colsNum: 1,
            fields: [
              { name: 'code', label: 'code', showIf: false },
              {
                name: 'expression',
                label: $t('expression'),
                type: 'w-code-mirror',
                lang: 'java',
                rows: 3,
                lineWrap: true,
                lineBreak: false,
                placeholder: true,
                autoCompletion: this.autoCompletionManager.autoCompletion(),
                userDefinedFunctions: this.userDefinedFunctionsManager.userDefinedFunctions(),
              },
            ],
          },
        },
        onBeforeEditorDataSubmit: (args: any) => {
          const form = args.grid.getEditorForm();
          if ('edit' == form.getStatus()) {
            args.grid.updateLocalData(args.data);
            args.callback(false);
          }
        },
      },
    ];
  }

  public getViewerFields(context?: any): any {
    return [];
  }

  public beforeEditorDataSubmit(args: any): void {
    const form = args.grid.getEditorForm();
    const grid = form.getFieldComponent('objectProperties');
    const localData: any[] = grid.getRows();
    const objectProperties: any[] = [];
    localData.forEach((item) => {
      objectProperties.push({
        code: item.code,
        name: item.name,
        expression: item.expression,
      });
    });
    args.data.objectProperties = Tools.object2Json(objectProperties);
  }

  public afterEditorOpen(args: any): void {
    this.initAutoCompletionManager(args);
    this.initUserDefinedFunctionsManager(args);

    const form = args.grid.getEditorForm();
    const row = args.data;
    if ('add' == form.getStatus()) {
      let listObejctPropertiesUrl = '';
      if (this.targetType === Processor.PARAMETER) {
        listObejctPropertiesUrl = '/api/re/model/parameter/listObejctPropertiesByParameterId/' + args.target.id;
      } else if (this.targetType === Processor.INDICATOR) {
        listObejctPropertiesUrl = '/api/re/indicator/listObejctPropertiesByIndicatorId/' + args.target.id;
      }
      axios.get(Environment.apiContextPath(listObejctPropertiesUrl)).then((response) => {
        const properties = response.data;
        const grid = form.getFieldComponent('objectProperties');
        grid?.setLocalData(properties);
      });
    } else if ('edit' == form.getStatus()) {
      let listObejctPropertiesUrl = '';
      if (this.targetType === Processor.PARAMETER) {
        listObejctPropertiesUrl = '/api/re/model/parameter/processor/listObejctPropertiesByProcessorId/' + row.id;
      } else if (this.targetType === Processor.INDICATOR) {
        listObejctPropertiesUrl = '/api/re/indicator/processor/listObejctPropertiesByProcessorId/' + row.id;
      }
      axios.get(Environment.apiContextPath(listObejctPropertiesUrl)).then((response) => {
        const properties = response.data;
        const grid = form.getFieldComponent('objectProperties');
        grid?.setLocalData(properties);
      });
    }
  }
}

export { ObjectProperties };