import { CampaignDetail } from './../../models/campaign-detail';
import { CampaignService } from './../../services/campaign.service';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-campaign-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.less'],
})
export class CampaignDetailComponent implements OnInit, OnDestroy {
  address!: string;
  campaignDetail!: CampaignDetail;
  subscriptions: Subscription = new Subscription();
  amountToContribute!: number;

  constructor(
    private route: ActivatedRoute,
    private campaignService: CampaignService
  ) {}

  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      if (params['address']) {
        this.address = params['address'];
        this.getCampaignSummary();
      }
    });
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }

  getCampaignSummary() {
    this.subscriptions.add(
      this.campaignService
        .getSummary(this.address)
        .subscribe((summary: CampaignDetail) => {
          this.campaignDetail = summary;
        })
    );
  }

  onContribute() {
    this.subscriptions.add(
      this.campaignService
        .contribute(this.address, this.amountToContribute)
        .subscribe((result) => {
          this.campaignService.stopTxHash$.next(true);
        })
    );
  }
}

<app-show-txhash></app-show-txhash>
<div class="main">
  <div *ngIf="campaignDetail" class="grid-view">
    <mat-card>
      <mat-card-title>{{campaignDetail.libelle}}</mat-card-title>
      <mat-card-subtitle>Managed by. {{campaignDetail.manager}}</mat-card-subtitle>
    </mat-card>
    <mat-card>
      <mat-card-title>{{campaignDetail.minimumContribution}} ether</mat-card-title>
      <mat-card-subtitle>Campaign minimum contribution</mat-card-subtitle>
      <mat-card-content>
        <p>
          Minimum contribution to become an approver and approve spending requests.
        </p>
      </mat-card-content>
    </mat-card>
    <mat-card>
      <mat-card-title>{{campaignDetail.balance}} ether</mat-card-title>
      <mat-card-subtitle>Campaign balance</mat-card-subtitle>
      <mat-card-content>
        <p>
          Total amount of ether received.
        </p>
      </mat-card-content>
    </mat-card>
    <mat-card>
      <mat-card-title>{{campaignDetail.requests}}</mat-card-title>
      <mat-card-subtitle>Campaign spending requests</mat-card-subtitle>
      <mat-card-content>
        <p>
          Total amount of spending requests.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button color="primary" routerLink="/campaign/detail/{{address}}/requests" mat-stroked-button>View
          requests</button>
        <button color="primary" routerLink="/campaign/detail/{{address}}/requests/new" mat-stroked-button>Create
          request</button>
      </mat-card-actions>
    </mat-card>
    <mat-card>
      <mat-card-title>{{campaignDetail.approversCount}}</mat-card-title>
      <mat-card-subtitle>Campaign approvers</mat-card-subtitle>
      <mat-card-content>
        <p>
          Total number of approvers.
        </p>
      </mat-card-content>
    </mat-card>
  </div>

  <div class="contribute-block">
    <h1>Contribute to this campaign</h1>
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label>Amount to contribute</mat-label>
      <input [(ngModel)]="amountToContribute" matInput placeholder="Ex. 0.05 ether">
    </mat-form-field>
    <button [disabled]="!amountToContribute" (click)="onContribute()" mat-raised-button color="primary">Contribute</button>
  </div>

  <router-outlet></router-outlet>

</div>