Untitled

import {Component, Input, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {AlertService} from "../../../shared/services/alert.service";
import {TempRequestService} from "../../../core/services/temp-request.service";
import {ResponseCodeEnum} from "../../../shared/Entity/response.enum";
import {MenuInfo, MenuInfoEdit} from "../ussd-menu.model";
import {catchError, forkJoin, of} from "rxjs";
import {UssdMenuService} from "../ussd-menu.service";
import {LayoutService} from "../../../layout/service/app.layout.service";
import {OptionService} from "../../option/option.service";

@Component({
  selector: 'app-menu-form',
  templateUrl: './menu-form.component.html',
  styleUrls: ['./menu-form.component.scss']
})
export class MenuFormComponent {
  menuInfo: MenuInfo = new MenuInfo();
  isEditMode = false;
  menuForm: FormGroup | any;
  remarksDetails: any;
  previousData: any;
  updatedData: any;
  displayData: any;
  menuInfoDetails: MenuInfo | null = null;
  transactionTypeList: any[] = [];
  childMenuList: any[] = [];
  childOptionList: any[]=[];
  originalChildOptionList: any[]=[];
  selectedChildMenu: any[]=[];
  selectedChildOption: any[]=[];
  originalChildMenuList: any[] = [];
  originalTransactionTypeList: any[] = [];
  selectedTransactionType: any = {};
  currentChildMenus:any[]=[];
  currentChildOption:any[]=[];
  menuTypeList = [
    {id: 1, value: 'Common'},
    {id: 2, value: 'Customer'},
    {id: 3, value: 'Merchant'}
  ];

  res2: any;
  parentsList: any[] = [];
  @Input() minimal: boolean = false;
  myForm!: FormGroup;
  showChildMenus: boolean = false;
  showChildOptions: boolean = false;
  childMenuArray: number[] = [];
  childOptionArray: number[]=[];

  constructor(
    private ussdMenuService: UssdMenuService,
    private router: Router,
    private fb: FormBuilder,
    private activatedRoute: ActivatedRoute,
    private alertService: AlertService,
    private tempRequestService: TempRequestService,
    public layoutService: LayoutService,
    private optionService:OptionService
  ) {
  }

  ngOnInit() {
    this.initiateForm();

    const id = this.activatedRoute.snapshot.params['id'] || null;
    if (id !== null) {
      this.isEditMode = true;
      this.getDetails(id);
    }
    this.getDropDowns();
    this.myForm = this.fb.group({
      radioOption: ['', Validators.required],
      numberInput: ['', Validators.required],
      dropdownValues: this.fb.array([]),
      child: [''],
      num_children: [0],
      num_option: [0]
    });
    this.myForm.get('num_children')?.valueChanges.subscribe(value => {
      this.showChildMenus = value > 0;
      this.childMenuArray = Array(value).fill(0).map((x, i) => i);
    });
    this.myForm.get('num_option')?.valueChanges.subscribe(value => {
      this.showChildOptions = value > 0;
      this.childOptionArray = Array(value).fill(0).map((x, i) => i);
    });
    //----------------
    // this.myForm = this.fb.group({
    //   child: [''],
    //   num_children: [0]
    // });
    //
    // this.myForm.get('num_children')?.valueChanges.subscribe(value => {
    //   this.showChildMenus = value > 0;
    //   this.childMenuArray = Array(value).fill(0).map((x, i) => i);
    // });

  }
  // onRadioChange() {
  //   // const radioOption = this.myForm.get('radioOption')?.value;
  //   // this.myForm.reset({
  //   //   radioOption,
  //   //   num_children: radioOption === 'Menu' ? '' : this.myForm.get('num_children')?.value,
  //   //   num_option: radioOption === 'Option' ? '' : this.myForm.get('num_option')?.value,
  //   //   // ... reset other form controls as needed
  //   // });
  //   // this.myForm.get('num_children')?.valueChanges.subscribe(value => {
  //   //   this.showChildMenus = value > 0;
  //   //   this.childMenuArray = Array(value).fill(0).map((x, i) => i);
  //   // });
  //   // this.myForm.get('num_option')?.valueChanges.subscribe(value => {
  //   //   this.showChildOptions = value > 0;
  //   //   this.childOptionArray = Array(value).fill(0).map((x, i) => i);
  //   // });
  //  // this.showChildMenus = radioOption === 'Menu';
  //  // this.showChildOptions = radioOption === 'Option';
  //
  //   const radioOption = this.myForm.get('radioOption')?.value;
  //   const numChildrenValue = radioOption === 'Menu' ? '' : this.myForm.get('num_children')?.valueChanges.subscribe(value => {
  //     this.showChildMenus = value > 0;
  //     this.childMenuArray = Array(value).fill(0).map((x, i) => i);
  //   });
  //   //this.myForm.get('num_option')?.value;
  //   const numOptionValue = radioOption === 'Option' ? '' :  this.myForm.get('num_option')?.valueChanges.subscribe(value => {
  //     this.showChildOptions = value > 0;
  //     this.childOptionArray = Array(value).fill(0).map((x, i) => i);
  //   });
  //
  //   this.myForm.reset({
  //     radioOption,
  //     num_children: numChildrenValue,
  //     num_option: numOptionValue,
  //     // ... reset other form controls as needed
  //   });
  // }
  initiateForm() {
    this.menuForm = this.fb.group({
      title: ['', Validators.required],
      type: ['', Validators.required],
      hasDependency: [false],
      childMenus: [],
      optionInfos: [],
      telcoChargeConfigurations: ['', Validators.required],
      priority: [null, Validators.required],
      disabled: true,
      manualEntriesAllowed: true,

    });
    this.menuForm.get('childMenus')?.valueChanges.subscribe(() => {
      this.updateHasDependency();
    });
    this.menuForm.get('optionInfos')?.valueChanges.subscribe(() => {
      this.updateHasDependency();
    });
  }
  updateHasDependency() {
    const childMenus = this.menuForm.get('childMenus')?.value || [];
    const optionInfos = this.menuForm.get('optionInfos')?.value || [];

    // Update hasDependency based on the conditions
    this.menuForm.get('hasDependency')?.setValue(childMenus.length > 0 || optionInfos.length > 0);
  }

  onRadioChange() {
    const radioOption = this.myForm.get('radioOption')?.value;

    // Reset common controls
    this.myForm.get('num_children')?.reset(0);
    this.myForm.get('num_option')?.reset(0);

    // Reset controls specific to 'Menu' or 'Option'
    if (radioOption === 'Menu') {
      this.myForm.get('num_option')?.reset('');
    } else if (radioOption === 'Option') {
      this.myForm.get('num_children')?.reset('');
    }
  }

  getDetails(id: any): void {
    this.ussdMenuService.getMenu(id)
      .subscribe({
        next: (res: any) => {
          console.log("get menu");
          console.log({res});
          const responseData = res.body;

          this.menuInfoDetails = responseData;

          this.updateForm(this.menuInfoDetails);
        },
        error: (err: any) => {
          this.alertService.showCommonAlertMessage(err.error.responseMessage, err.error.responseCode);
        }
      })

  }

  updateForm(menuInfoDetails: any) {
    console.log("hello update form");
    console.log(menuInfoDetails);
    this.menuForm.patchValue({
      id: menuInfoDetails.id,
      title: menuInfoDetails.title,
      type: menuInfoDetails.type,
      childMenus: menuInfoDetails.childMenus,
      optionInfos: menuInfoDetails.optionInfos,
      telcoChargeConfigurations: menuInfoDetails.telcoChargeConfigurations,
    });
  }

  create() {
    this.loadData();
    this.remarksDetails = "New Menu has been created";
    console.log("create menu form");
    console.log(this.menuForm.value);
    this.ussdMenuService.saveMenu(this.menuForm.value).subscribe({
      next: (res: any) => {
        if (res.responseCode === ResponseCodeEnum.OPERATION_SUCCESSFUL) {
          this.alertService.showSuccessMessage();
        }
        else {
          this.alertService.showCommonAlertMessage(res.body.responseMessage, res.body.responseCode);
        }
        this.router.navigate(['/admin', 'ussd-menu']);
      },
      error: (err: any) => {
        this.alertService.showCommonAlertMessage(err.error.responseMessage, err.error.responseCode);
      }
    })
  }

  edit() {

    const formData = new MenuInfoEdit();

    formData.id = this.menuInfoDetails?.id;
    formData.title = this.menuForm?.get('title')?.value || this.menuInfoDetails?.title;
    formData.type = this.menuForm?.get('type')?.value || this.menuInfoDetails?.type;

    console.log("Check1", this.menuInfoDetails);
    console.log("Check", formData);
    this.loadData();
    this.remarksDetails = this.tempRequestService.compareChanges(this.previousData, this.updatedData);

    if (this.remarksDetails.startsWith('F')) {
      console.log("update Menu");
      this.ussdMenuService.updateMenu(formData).subscribe({
        next: (res: any) => {
          console.log({res});
          this.alertService.showCommonAlertMessage(res.body.responseMessage, res.body.responseCode);
          this.router.navigate(['/admin', 'ussd-menu']);
        },
        error: (err: any) => {
          this.alertService.showCommonAlertMessage(err.error.responseMessage, err.error.responseCode);
        }
      })
    }else {
      this.alertService.showCommonAlertMessage("You haven't made any changes");
    }
  }
  loadData() {
    this.previousData = {
      optionName: this.menuInfoDetails?.title,
      type: this.menuInfoDetails?.type,
    };
    this.updatedData = {
      title: this.menuForm?.value.title,
      type: this.menuForm?.value.type,
    };

    this.displayData = JSON.stringify(this.updatedData);
  }

  private getDropDowns() {
    console.log("get dropdowns");
    forkJoin({
       telcoResponse: this.ussdMenuService.getAllCharges().pipe(catchError(error => of(error))),
       childMenuResponse: this.ussdMenuService.getMenus().pipe(catchError(error => of(error))),
       childOptionResponse: this.optionService.getOptions().pipe(catchError(error => of(error))),

    }).subscribe({
      next: (res: any) => {
        console.log("telcoResponse:",res.telcoResponse);
         //this.transactionTypeList = res.telcoResponse;
        this.originalTransactionTypeList = res.telcoResponse;
        console.log("transactionTypeList:",res.telcoResponse);
        console.log("child menu list:",res.childMenuResponse);
        console.log("child option list:",res.childOPtionResponse);
        this.transactionTypeList = this.originalTransactionTypeList.map(item => {
          return {
            id: item.id,
            value: `${item.category} - ${item.type}`
          };
        });
        this.originalChildMenuList = res.childMenuResponse;
        this.childMenuList = this.originalChildMenuList.map(item => {
          return {
            id: item.id,
            value: `${item.title}`
          };
        });
        this.originalChildOptionList = res.childOptionResponse;
        this.childOptionList = this.originalChildOptionList.map(item => {
          return {
            id: item.id,
            value: `${item.title}`
          };
        });

        this.res2 = res;
        this.getParent();
      },
      error: (err) => {
        this.alertService.showCommonAlertMessage(err.error.responseMessage, err.error.responseCode);
      }
    })

    this.initiateForm();
  }
  onTelcoChargeConfigChange(event: any) {
    console.log("one telc charge config");
    console.log('Event:', event);

      // Step 3: Find the complete object based on the id
      const selectedId = event.value;
      this.selectedTransactionType = this.originalTransactionTypeList .find(item => item.id === selectedId);
      console.log("selecteTransactionType:",this.selectedTransactionType);

      // Step 4: Set the value for the form control
      this.menuForm.get('telcoChargeConfigurations')?.setValue(this.selectedTransactionType);
  }

  onChildMenuChange(event: any) {
    console.log("one telc charge config");
    console.log('Event:', event);

    // Step 3: Find the complete object based on the id
    const selectedId = event.value;
    this.selectedChildMenu = this.originalChildMenuList.find(item => item.id === selectedId);
    console.log("selecte Child menu:",this.selectedChildMenu);
    // Step 4: Get the current value of childMenus form control
  //  const currentChildMenus = this.menuForm.get('childMenus')?.value || [];
    // Step 5: Add the selected child menu to the array
    this.currentChildMenus.push(this.selectedChildMenu);
    // Step 6: Set the updated value for the form control
    this.menuForm.get('childMenus')?.setValue(this.currentChildMenus);
    // // Step 4: Set the value for the form control
    // this.menuForm.get('childMenus')?.setValue(this.selectedChildMenu);
  }

  onChildOptionChange(event: any) {
    console.log("one telc charge config");
    console.log('Event:', event);

    // Step 3: Find the complete object based on the id
    const selectedId = event.value;
    this.selectedChildOption = this.originalChildOptionList.find(item => item.id === selectedId);
    console.log("selecte Child option:",this.selectedChildOption);
    // Step 4: Get the current value of childMenus form control
    //  const currentChildMenus = this.menuForm.get('childMenus')?.value || [];
    // Step 5: Add the selected child menu to the array
    this.currentChildOption.push(this.selectedChildOption);
    // Step 6: Set the updated value for the form control
    this.menuForm.get('optionInfos')?.setValue(this.currentChildOption);
    // // Step 4: Set the value for the form control
    // this.menuForm.get('childMenus')?.setValue(this.selectedChildMenu);
  }
  getParent() {
    this.parentsList = [];
    this.parentsList = this.res2.glAccountResponse.body.data.filter((item: any) => {
      return (item.usage.value === 'HEADER' && item.type.id === this.menuForm.get('type').value);
    });
  }
  get menuMode(): string {
    return this.layoutService.config.menuMode;
  }

  set menuMode(_val: string) {
    this.layoutService.config.menuMode = _val;
  }
  get inputStyle(): string {
    return this.layoutService.config.inputStyle;
  }

  set inputStyle(_val: string) {
    this.layoutService.config.inputStyle = _val;
  }

  get ripple(): boolean {
    return this.layoutService.config.ripple;
  }
  generateDropdownOptions(): any {
    const numberInputControl = this.myForm.get('numberInput');

    if (numberInputControl) {
      const numberInput = numberInputControl.value || 0;
      const dropdownValues = this.myForm.get('dropdownValues') as FormArray;

      dropdownValues.clear(); // Clear the existing dropdown values

      for (let i = 0; i < numberInput; i++) {
        dropdownValues.push(this.fb.control('')); // Add a FormControl for each dropdown
      }
    }
  }


  set ripple(_val: boolean) {
    this.layoutService.config.ripple = _val;
  }
  // saveOption() {
  //   this.ussdMenuService.saveMenu(this.menuInfo)
  //     .subscribe(
  //       data => {
  //         console.log(data);
  //       },
  //       error => {
  //         console.error(error);
  //       }
  //     );
  // }
  previousState(): void {
    window.history.back();
  }


}