import { Component, OnInit, OnDestroy  } from '@angular/core';
import {  Asset, TypeDepreciation,  YearMonth,  AssetLifeChange } from  '../assets/asset';
import { ReactiveFormsModule, FormBuilder, FormGroup,  FormArray, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';



@Component({
  selector: 'app-fixed-asset',
  standalone: true,
  imports: [ReactiveFormsModule],
  template:`

<div class="container">

<h2 class="text-center m-2">Lista środków trwałych</h2>
  <div class="table-responsive">
    <table id="assets" class="table table-bordered">
      
        <thead>
            <tr>
                <th class="col-2">Numer inwentarzowy</th>
                <th class="col-2">Wartość</th>
                <th class="col-2">Metoda amortyzacji</th>
                <!-- <th class="col-2">Stawka</th>
                <th class="col-2"></th> -->
            </tr>
        </thead>

        <tbody>

        @for( assetFormGroup of assetFormArray.controls; track $index  ) {
            <tr [formGroup] = "assetFormGroup">
              <td> <input class="form-control" formControlName="nrInv"        type="text"  readonly></td> 
              <td> <input class="form-control" formControlName="initialValue" type="number" placeholder="Wprowadź wartość"></td>

              <!-- <td> 
                <select   class="form-select"  formControlName="typeDepreciation"  >                           
                    <option  [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
                    <option  [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
                </select>
              </td>
              <td> <input class="form-control" formControlName="depreciationRate" type="number"  /> </td>                -->
             
              <td class="col-2">
                <input type="button" class="btn btn-outline-secondary" (click)="delete($index)"  value="Usuń Składnik">
              </td>

            </tr>
     
        }
        </tbody>
    </table>
  </div>

  <input type="button" (click)=addNew()      class="btn btn-outline-secondary" value="Dodaj Składnik">

</div>
`,
  styleUrl: './fixed-asset.component.css'
})
export class FixedAssetComponent {

  static STORAGE_KEY = "fixed_assets";

  static indexNr = 1;

  TypeDepreciation = TypeDepreciation;

  assetFormArray   : FormArray<FormGroup>;

  constructor( private fb: FormBuilder ){
    this.assetFormArray  = 	this.fb.array<FormGroup>([])
  }

  ngOnInit(): void {
    const savedAssets = localStorage.getItem( FixedAssetComponent.STORAGE_KEY) ;
    if( savedAssets ) {
      this.assetsToControls( JSON.parse( savedAssets )  );
    }
  }

  ngOnDestroy(): void {
     localStorage.setItem( FixedAssetComponent.STORAGE_KEY, JSON.stringify( this.controlsToAssets() ) );
  }

  private assetsToControls( assetsArray: [ string, Asset ][]) {
    const assetsMap = new Map<string, Asset>( assetsArray );
    assetsMap.forEach( (asset, key) => {
      this.addRow( key, asset.life[0].initial );
    });
  }

  private controlsToAssets(): [string, Asset][] {

    const assets = new Map<string, Asset>();
    this.assetFormArray.controls.forEach( control => {

      const nrInv           = control.get('nrInv')?.value;
      const initialValue    = control.get('initialValue')?.value;
      const yearMonth       = YearMonth.today();
      const asset           = new Asset( yearMonth );
      const assetLifeChange = new AssetLifeChange( yearMonth, initialValue, 0, 0 );
      asset.addChange( assetLifeChange );
      assets.set( nrInv, asset );

    });

    return Array.from( assets.entries() );

  }

  delete( index : number ){
    this.assetFormArray.removeAt( index );
  }

  addNew(){
    this.addRow( "NrInv" + FixedAssetComponent.indexNr++, 1000 );
  }

  addRow( nrInv_:string, initial_: number ):void{

    const newRow = this.fb.group({
      nrInv            : [ nrInv_ ],
      initialValue     : [ initial_ ],
    });
    
    // typeDepreciation : [ TypeDepreciation.linear ],
    // depreciationRate : [ 10 ],
    // year_month	     : [ year_month ]
    this.assetFormArray.push( newRow );


  }

  // uniqueColumnValidator(): ValidatorFn {
  //   return (control: AbstractControl): ValidationErrors | null => {

  //     const values = this.assetFormArray.map(field => field.value) || [];
  //     const uniqueValues = new Set(values);
  //     return uniqueValues.size !== values.length ? { uniqueColumn: true } : null;
  //   };
  // }

}