import { Component } from '@angular/core';
import { AssetsContainer, Asset, TypeDepreciation, YearMonth } from  '../asset-calculator/assets/asset';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators, FormControl, FormArray} 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="nr" 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 indexNr = 1;

  TypeDepreciation = TypeDepreciation;

  assetsContainer  : AssetsContainer; 


  assetFormArray   : FormArray<FormGroup>;

 
  constructor( private fb: FormBuilder ){

    this.assetsContainer = new AssetsContainer ();
    this.assetFormArray  = 	this.fb.array<FormGroup>([])

  }

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

  addNew(){
     this.addNr("NrInv" + FixedAssetComponent.indexNr++ );
  }

  addNr( nrInv:string ):void{
    
    const today = new Date();
    const year  = today.getFullYear();
    const month = today.getMonth() + 1;
    const year_month = year +'-'+month;
    const yearMonth = new YearMonth( year_month ) ;
    const asset = new Asset( 20, yearMonth, TypeDepreciation.linear, 10 );
    
    const newRow= this.fb.group({
      nr               : [ nrInv ],
      initialValue     : [ 10000 ],
      depreciationRate : [ 10 ],
      typeDepreciation : [ TypeDepreciation.linear ],
      year_month	     : [ year_month ]
    })
    this.assetFormArray.push( newRow );

  }
}