import { Component, forwardRef } from '@angular/core';
import { ComponentMapperComponent } from '@pega/angular-sdk-components';
import { DetailsTemplateBase } from '@pega/angular-sdk-components';

@Component({
  selector: 'app-details-three-column',
  templateUrl: './details-three-column.component.html',
  styleUrls: ['./details-three-column.component.scss'],
  imports: [forwardRef(() => ComponentMapperComponent)]
})
export class DetailsThreeColumnComponent extends DetailsTemplateBase {
  override pConn$: typeof PConnect;

  showHighlightedData: boolean;
  highlightedDataArr: any;

  arFields$: any[] = [];
  arFields2$: any[] = [];
  arFields3$: any[] = [];

  propsToUse: any = {};

  override updateSelf() {
    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
    this.showHighlightedData = rawMetaData?.showHighlightedData;

    if (this.showHighlightedData) {
      const highlightedData = rawMetaData?.highlightedData;
      this.highlightedDataArr = highlightedData.map(field => {
        field.config.displayMode = 'STACKED_LARGE_VAL';

        if (field.config.value === '@P .pyStatusWork') {
          field.type = 'TextInput';
          field.config.displayAsStatus = true;
        }

        return field;
      });
    }

    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
    this.pConn$.setInheritedProp('readOnly', true);

    const kids = this.pConn$.getChildren() as any[];
    for (const kid of kids) {
      const pKid = kid.getPConnect();
      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
      if (kids.indexOf(kid) == 0) {
        this.arFields$ = pKidData.children;
      } else if (kids.indexOf(kid) == 1) {
        this.arFields2$ = pKidData.children;
      } else {
        this.arFields3$ = pKidData.children;
      }
    }
  }
}