T.S Component

import { Component, OnInit, Input } from "@angular/core";
import {
  UntypedFormGroup,
  FormGroup,
  UntypedFormBuilder,
  Validators,
  UntypedFormArray,
  UntypedFormControl,
  FormControl,
  FormArray,
} from "@angular/forms";
import { MatDialog } from "@angular/material/dialog";
import { animate, state, style, transition, trigger } from "@angular/animations";
import { TooltipPosition } from "@angular/material/tooltip";

/** Custom Components */
import { FormDialogComponent } from "app/shared/form-dialog/form-dialog.component";
import { DepositProductIncentiveFormDialogComponent } from "app/products/deposit-product-incentive-form-dialog/deposit-product-incentive-form-dialog.component";
import { DeleteDialogComponent } from "app/shared/delete-dialog/delete-dialog.component";

/** Dialog Components */
import { FormfieldBase } from "app/shared/form-dialog/formfield/model/formfield-base";
import { SelectBase } from "app/shared/form-dialog/formfield/model/select-base";
import { InputBase } from "app/shared/form-dialog/formfield/model/input-base";

/** Custom Services */
import { SettingsService } from "app/settings/settings.service";
import { Dates } from "app/core/utils/dates";

@Component({
  selector: "mifosx-fixed-deposit-product-interest-rate-chart-step",
  templateUrl: "./fixed-deposit-product-interest-rate-chart-step.component.html",
  styleUrls: ["./fixed-deposit-product-interest-rate-chart-step.component.scss"],
  animations: [
    trigger("expandChartSlab", [
      state("collapsed", style({ height: "0px", minHeight: "0" })),
      state("expanded", style({ height: "*" })),
      transition("expanded <=> collapsed", animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")),
    ]),
  ],
})
export class FixedDepositProductInterestRateChartStepComponent implements OnInit {
  @Input() fixedDepositProductsTemplate: any;

  fixedDepositProductInterestRateChartForm: UntypedFormGroup;

  periodTypeData: any;
  entityTypeData: any;
  attributeNameData: any;
  conditionTypeData: any;
  genderData: any;
  clientTypeData: any;
  clientClassificationData: any;
  incentiveTypeData: any;

  chartSlabsDisplayedColumns: { [key: number]: string[] } = {};
  chartSlabsIncentivesDisplayedColumns: string[] = ["incentives"];
  incentivesDisplayedColumns: string[] = [
    "entityType",
    "attributeName",
    "conditionType",
    "attributeValue",
    "incentiveType",
    "amount",
    "actions",
  ];

  minDate = new Date(2000, 0, 1);
  maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 10));

  expandChartSlabIndex: number[] = [];
  chartDetailData: any = [];
  chartsDetail: any[] = [];
  deletedSlabs: any[] = [];
  loading: boolean = true;

  /**
   * @param {FormBuilder} formBuilder Form Builder.
   * @param {MatDialog} dialog Dialog reference.
   * @param {Dates} dateUtils Date Utils.
   * @param {SettingsService} settingsService Settings Service.
   */

  constructor(
    private readonly formBuilder: UntypedFormBuilder,
    public dialog: MatDialog,
    private readonly dateUtils: Dates,
    private readonly settingsService: SettingsService,
  ) {
    this.createFixedDepositProductInterestRateChartForm();
  }

  ngOnInit() {
    this.periodTypeData = this.fixedDepositProductsTemplate.chartTemplate.periodTypes;
    this.entityTypeData = this.fixedDepositProductsTemplate.chartTemplate.entityTypeOptions;
    this.attributeNameData = this.fixedDepositProductsTemplate.chartTemplate.attributeNameOptions;
    this.conditionTypeData = this.fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions;
    this.genderData = this.fixedDepositProductsTemplate.chartTemplate.genderOptions;
    this.clientTypeData = this.fixedDepositProductsTemplate.chartTemplate.clientTypeOptions;
    this.clientClassificationData = this.fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions;
    this.incentiveTypeData = this.fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions;

    //console.clear();
    console.log(this.fixedDepositProductsTemplate);
    //if (this.chartDetailData.length === 0 || !this.chartDetailData[0]?.name) {
    //return;
    //}
    if (!(this.fixedDepositProductsTemplate === undefined)) {
      setTimeout(() => {
        this.assignFormData();
        this.loading = false;
      }, 2000);
    }
  }

  assignFormData() {
    this.addChart();
    if (this.fixedDepositProductsTemplate?.interestRateCharts) {
      this.chartDetailData.push(this.fixedDepositProductsTemplate.interestRateCharts);
    }
    this.getChartsDetailsData();

    // Iterates for every chart in charts
    this.charts.controls.forEach((chartDetailControl: UntypedFormGroup, i: number) => {
      if (!this.chartsDetail[i]) {
        return;
      }

      // Iterate for every chartSlab in chart
      this.chartsDetail[i].chartSlabs.forEach((chartSlabDetail: any, j: number) => {
        const chartSlabInfo = this.formBuilder.group({
          amountRangeFrom: [chartSlabDetail.amountRangeFrom || ""],
          amountRangeTo: [chartSlabDetail.amountRangeTo || ""],
          annualInterestRate: [chartSlabDetail.annualInterestRate, Validators.required],
          description: [chartSlabDetail.description, Validators.required],
          fromPeriod: [chartSlabDetail.fromPeriod, Validators.required],
          toPeriod: [chartSlabDetail.toPeriod || ""],
          periodType: [chartSlabDetail.periodType, Validators.required],
          incentives: this.formBuilder.array([]),
        });
        const formArray = chartDetailControl.controls["chartSlabs"] as UntypedFormArray;
        formArray.push(chartSlabInfo);

        // Iterate for every slab in chartSlab
        const chartSlabs = chartDetailControl.get("chartSlabs") as UntypedFormArray;
        const chartIncentiveControl = chartSlabs.controls[j];

        // Iterate to input all the incentive for particular chart slab
        this.chartsDetail[i].chartSlabs[j].incentives.forEach((chartIncentiveDetail: any) => {
          const incentiveInfo = this.formBuilder.group({
            amount: [chartIncentiveDetail.amount, Validators.required],
            attributeName: [chartIncentiveDetail.attributeName, Validators.required],
            attributeValue: [chartIncentiveDetail.attributeValue, Validators.required],
            conditionType: [chartIncentiveDetail.conditionType, Validators.required],
            entityType: [chartIncentiveDetail.entityType, Validators.required],
            incentiveType: [chartIncentiveDetail.incentiveType, Validators.required],
          });
          const newFormArray = chartIncentiveControl?.get("incentives") as UntypedFormArray; // Get the 'incentives' array
          newFormArray.push(incentiveInfo);
        });
      });
    });
  }

  getChartsDetailsData() {
    const flattenedData = this.chartDetailData.flat();
    console.log("chartData", this.chartDetailData);
    flattenedData.forEach((chartData: any) => {
      const chart = {
        endDate: chartData.endDate ? new Date(chartData.endDate) : "",
        fromDate: chartData.fromDate ? new Date(chartData.fromDate) : "",
        isPrimaryGroupingByAmount: chartData.isPrimaryGroupingByAmount,
        name: chartData.name,
        description: chartData.description,
        chartSlabs: this.getChartSlabsData(chartData.chartSlabs),
      };
      const chartsArray = this.fixedDepositProductInterestRateChartForm.get("charts") as UntypedFormArray;

      this.chartsDetail.push(chart);

      setTimeout(() => {
        // Ensure the FormArray has the correct number of controls
        while (chartsArray.length < this.chartsDetail.length) {
          const formGroup = this.formBuilder.group({});
          // Dynamically add controls based on object keys
          Object.keys(this.chartsDetail[0]).forEach((key) => {
            formGroup.addControl(key, new FormControl(chartData[key]));
          });
          chartsArray.push(formGroup);
        }
      }, 500);

      setTimeout(() => {
        console.clear();
        console.log("chartSlabsDisplayedColumns", this.chartSlabsDisplayedColumns);
        this.fixedDepositProductInterestRateChartForm.setControl(
          "charts",
          this.createChartsFormArray(this.chartsDetail),
        );
      }, 1000);
    });
  }

  createChartsFormArray(chartsData: any[]): UntypedFormArray {
    const formArray = this.formBuilder.array([]);

    chartsData.forEach((chart) => {
      formArray.push(
        this.formBuilder.group({
          endDate: [chart.endDate],
          fromDate: [chart.fromDate],
          isPrimaryGroupingByAmount: [chart.isPrimaryGroupingByAmount],
          name: [chart.name],
          description: [chart.description],
          chartSlabs: this.createChartSlabsFormArray(chart.chartSlabs),
        }),
      );
    });

    return formArray;
  }
  createChartSlabsFormArray(chartSlabsData: any[]): UntypedFormArray {
    const formArray = this.formBuilder.array([]);

    chartSlabsData.forEach((slab) => {
      formArray.push(
        this.formBuilder.group({
          periodType: [slab.periodType?.id ?? null],
          amountRangeFrom: [slab.amountRangeFrom ?? 0],
          amountRangeTo: [slab.amountRangeTo ?? 0],
          annualInterestRate: [slab.annualInterestRate ?? 0],
          description: [slab.description || ""],
          fromPeriod: [slab.fromPeriod ?? null],
          toPeriod: [slab.toPeriod ?? null],
          incentives: this.createIncentivesFormArray(slab.incentives),
        }),
      );
    });

    return formArray;
  }

  createIncentivesFormArray(incentivesData: any[]): UntypedFormArray {
    const formArray = this.formBuilder.array([]);

    incentivesData.forEach((incentive) => {
      formArray.push(
        this.formBuilder.group({
          amount: [incentive?.amount ?? 0],
          attributeName: [incentive?.attributeName ?? ""],
          attributeValue: [incentive?.attributeValue ?? ""],
          conditionType: [incentive?.conditionType ?? ""],
          entityType: [incentive?.entityType ?? ""],
          incentiveType: [incentive?.incentiveType ?? ""],
        }),
      );
    });

    return formArray;
  }

  getChartSlabsData(chartData: any): any[] {
    const chartSlabs: any[] = [];

    chartData.forEach((dataItem: any) => {
      const slabData = Array.isArray(dataItem.chartSlabs) ? dataItem.chartSlabs : [dataItem];

      slabData.forEach((eachChartSlabData: any) => {
        chartSlabs.push({
          periodType: eachChartSlabData.periodType?.id ?? null,
          amountRangeFrom: eachChartSlabData.amountRangeFrom ?? 0,
          amountRangeTo: eachChartSlabData.amountRangeTo ?? 0,
          annualInterestRate: eachChartSlabData.annualInterestRate ?? 0,
          description: eachChartSlabData.description || "",
          fromPeriod: eachChartSlabData.fromPeriod ?? null,
          toPeriod: eachChartSlabData.toPeriod ?? null,
          incentives: this.getIncentivesData(eachChartSlabData),
        });
      });
    });

    return chartSlabs;
  }

  getIncentivesData(chartSlabData: any) {
    let incentives: any[] = [
      {
        amount: 0,
        attributeName: "",
        attributeValue: "",
        conditionType: "",
        entityType: "",
        incentiveType: "",
      },
    ];
    let incentiveDatas: any[] = [];
    if (chartSlabData.incentives) {
      incentives = [];
      const isChartIncentiveArray = Array.isArray(chartSlabData.incentives);
      if (!isChartIncentiveArray) {
        incentiveDatas.push(chartSlabData.incentives);
      } else {
        incentiveDatas = chartSlabData.incentives;
      }
      incentiveDatas.forEach((incentiveData: any) => {
        const incentive = {
          amount: incentiveData.amount,
          attributeName: incentiveData.attributeName,
          attributeValue: incentiveData.attributeValue,
          conditionType: incentiveData.conditionType,
          entityType: incentiveData.entityType,
          incentiveType: incentiveData.incentiveType,
        };
        incentives.push(incentive);
      });
    }
    return incentives;
  }

  createFixedDepositProductInterestRateChartForm() {
    this.fixedDepositProductInterestRateChartForm = this.formBuilder.group({
      charts: this.formBuilder.array([]),
    });
  }

  get charts(): UntypedFormArray {
    return this.fixedDepositProductInterestRateChartForm.get("charts") as UntypedFormArray;
  }

  createChartForm(): UntypedFormGroup {
    return this.formBuilder.group({
      name: [""],
      description: [""],
      fromDate: ["", Validators.required],
      endDate: [""],
      isPrimaryGroupingByAmount: [false],
      chartSlabs: this.formBuilder.array([], Validators.required),
    });
  }

  addChart() {
    this.charts.push(this.createChartForm());
    this.setConditionalControls(this.charts.length - 1);
  }

  setConditionalControls(chartIndex: number): string[] {
    if (!this.chartSlabsDisplayedColumns[chartIndex]) {
      this.chartSlabsDisplayedColumns[chartIndex] = [
        "period",
        "amountRange",
        "annualInterestRate",
        "description",
        "actions",
      ];
    }
    this.charts
      .at(chartIndex)
      .get("isPrimaryGroupingByAmount")
      .valueChanges.subscribe((isPrimaryGroupingByAmount: boolean) => {
        this.chartSlabsDisplayedColumns[chartIndex] = isPrimaryGroupingByAmount
          ? ["amountRange", "period"]
          : ["period", "amountRange"];
        this.chartSlabsDisplayedColumns[chartIndex].push("annualInterestRate", "description", "actions");
      });
    return this.chartSlabsDisplayedColumns[chartIndex];
  }

  // getIncentives(chartSlabs: UntypedFormArray, chartSlabIndex: number): UntypedFormArray {
  //   console.log("Is FormArray:", chartSlabs instanceof UntypedFormArray);
  //   // return chartSlabs.at(chartSlabIndex).get("incentives") as UntypedFormArray;
  //   return chartSlabs.controls[chartSlabIndex].get("incentives") as UntypedFormArray;
  // }

  getIncentives(chartSlabs: any, chartSlabIndex: number): UntypedFormArray {
    console.clear();

    if (!(chartSlabs?.controls instanceof Array)) {
      console.warn("chartSlabs was not a FormArray. Converting it now.");
      chartSlabs = new UntypedFormArray(
        (Array.isArray(chartSlabs) ? chartSlabs : []).map((slab) =>
          this.formBuilder.group({
            incentives: this.formBuilder.array(slab?.incentives || []),
          }),
        ),
      );
    }

    if (chartSlabIndex < 0 || (chartSlabs?.value?.length !== 0 && chartSlabIndex >= chartSlabs?.value?.length)) {
      console.error(`Invalid chartSlabIndex: ${chartSlabIndex}. Index out of range.`);
      return new UntypedFormArray([]);
    }

    const chartSlab = chartSlabs?.at(chartSlabIndex) as FormGroup | undefined;
    if (!chartSlab) {
      console.error(`Chart slab at index ${chartSlabIndex} is undefined.`);
      return new UntypedFormArray([]);
    }

    const incentives = chartSlab?.get("incentives") as UntypedFormArray | undefined;
    console.log({ chartSlab, incentives });
    if (!(incentives instanceof UntypedFormArray)) {
      console.error(`Incentives field is missing or not a FormArray.`);
      return new UntypedFormArray([]);
    }

    return incentives;
  }

  addChartSlab(chartSlabs: UntypedFormArray) {
    const data = { ...this.getData("Slab") };
    const dialogRef = this.dialog.open(FormDialogComponent, { data });
    dialogRef.afterClosed().subscribe((response: any) => {
      if (response.data) {
        response.data.addControl("incentives", this.formBuilder.array([]));
        chartSlabs.push(response.data);
      }
    });
  }

  addIncentive(incentives: UntypedFormArray) {
    const data = { ...this.getData("Incentive"), entityType: this.entityTypeData[0].id };
    const dialogRef = this.dialog.open(DepositProductIncentiveFormDialogComponent, { data });
    dialogRef.afterClosed().subscribe((response: any) => {
      if (response.data) {
        console.clear();
        incentives.push(response.data);
        console.log({ incentives });
      }
    });
  }

  editChartSlab(chartSlabs: UntypedFormArray, chartSlabIndex: number) {
    const data = { ...this.getData("Slab", chartSlabs.at(chartSlabIndex).value), layout: { addButtonText: "Edit" } };
    console.log(data);
    const dialogRef = this.dialog.open(FormDialogComponent, { data });
    dialogRef.afterClosed().subscribe((response: any) => {
      if (response.data) {
        chartSlabs.at(chartSlabIndex).patchValue(response.data.value);
      }
    });
  }

  editIncentive(incentives: UntypedFormArray, incentiveIndex: number) {
    console.clear();
    console.log(incentives);
    const data = {
      ...this.getData("Incentive", incentives?.at(incentiveIndex)?.value),
      layout: { addButtonText: "Edit" },
    };
    console.log(data);
    const dialogRef = this.dialog.open(DepositProductIncentiveFormDialogComponent, { data });
    dialogRef.afterClosed().subscribe((response: any) => {
      if (response.data) {
        setTimeout(() => {
          console.clear();
        }, 1000);
        incentives?.at(incentiveIndex)?.patchValue(response.data.value);
      }
    });
  }

  delete(formArray: UntypedFormArray, index: number) {
    const dialogRef = this.dialog.open(DeleteDialogComponent, {
      data: { deleteContext: `this slab` },
    });
    dialogRef.afterClosed().subscribe((response: any) => {
      if (response.delete) {
        const chartSlab = formArray.at(index).value;
        chartSlab.deleted = true;

        this.deletedSlabs.push(chartSlab);
        localStorage.setItem("deletedSlabs", JSON.stringify(this.deletedSlabs));
        formArray.removeAt(index);
      }
    });
  }

  getData(formType: string, values?: any) {
    switch (formType) {
      case "Slab":
        return { title: "Slab", formfields: this.getSlabFormfields(values) };
      case "Incentive":
        return { values, chartTemplate: this.fixedDepositProductsTemplate.chartTemplate };
    }
  }

  getSlabFormfields(values?: any) {
    const formfields: FormfieldBase[] = [
      new SelectBase({
        controlName: "periodType",
        label: "Period Type",
        value: values ? values.periodType : this.periodTypeData[0].id,
        options: { label: "value", value: "id", data: this.periodTypeData },
        required: true,
        order: 1,
      }),
      new InputBase({
        controlName: "fromPeriod",
        label: "Period From",
        value: values ? values.fromPeriod : undefined,
        type: "number",
        required: true,
        order: 2,
      }),
      new InputBase({
        controlName: "toPeriod",
        label: "Period To",
        value: values ? values.toPeriod : undefined,
        type: "number",
        order: 3,
      }),
      new InputBase({
        controlName: "amountRangeFrom",
        label: "Amount Range From",
        value: values ? values.amountRangeFrom : undefined,
        type: "number",
        order: 4,
      }),
      new InputBase({
        controlName: "amountRangeTo",
        label: "Amount Range To",
        value: values ? values.amountRangeTo : undefined,
        type: "number",
        order: 5,
      }),
      new InputBase({
        controlName: "annualInterestRate",
        label: "Interest",
        value: values ? values.annualInterestRate : undefined,
        type: "number",
        required: true,
        order: 6,
      }),
      new InputBase({
        controlName: "description",
        label: "Description",
        value: values ? values.description : undefined,
        required: true,
        order: 7,
      }),
    ];
    return formfields;
  }

  get fixedDepositProductInterestRateChart() {
    // TODO: Update once language and date settings are setup
    const locale = this.settingsService.language.code;
    const dateFormat = this.settingsService.dateFormat;
    const fixedDepositProductInterestRateChart = this.fixedDepositProductInterestRateChartForm.value;
    for (const chart of fixedDepositProductInterestRateChart.charts) {
      chart.dateFormat = dateFormat;
      chart.locale = locale;
      chart.fromDate = this.dateUtils.formatDate(chart.fromDate, dateFormat) || "";
      chart.endDate = this.dateUtils.formatDate(chart.endDate, dateFormat) || "";
      if (chart.endDate === "") {
        delete chart.endDate;
      }
    }
    return fixedDepositProductInterestRateChart;
  }
}