import { Component, OnInit, Input } from '@angular/core';
import { CompanySubscription } from 'src/app/models/company-subscription.model';
import { PieGrid } from 'src/app/models/Charts/pie-grid.model';
import { Plan } from 'src/app/models/plan.model';
import { Company } from 'src/app/models/company.model';
import { Usage } from 'src/app/models/usage.model';
import { SubscriptionService } from 'src/app/services/subscription.service';
import { Role } from 'src/app/models/role.model';
import { SubscriptionSelection } from 'src/app/models/subscription-selection.model';
import { HitAWodService } from 'src/app/services/hit-a-wod.service';
import { Subscription } from 'src/app/models/subscription.model';
import * as moment from 'moment';
import { AuthenticationService } from 'src/app/services/authentication.service';

@Component({
  selector: 'app-active-plan',
  templateUrl: './active-plan.component.html',
  styleUrls: ['./active-plan.component.css']
})
export class ActivePlanComponent implements OnInit {

  subscriptionSelection:SubscriptionSelection;
  company_subscriptions:Subscription[];

  subscription:CompanySubscription;
  company:Company;
  rol:Role;
  pie: PieGrid = new PieGrid();

  appChangeCompanyPlanDialog:boolean = false;
  appUpdateCompanyPaymentMethodDialog:boolean = false;

  @Input() vertical:boolean = false;
  @Input() more_options:boolean = false;
  @Input() pressed:boolean = true;

  constructor(private subscriptionService: SubscriptionService,
              private api:HitAWodService,
              private auth:AuthenticationService) { }

  ngOnInit(): void {
    this.pie.view = [200,200];
    
    this.subscriptionService.currentSubscription.subscribe( s => {
      if (s) {
        this.subscriptionSelection = s;
        if (s.role) {
          this.rol = s.role;
        }
        if (s.company) {
          this.company = s.company;
          this.subscription = s.company.active_plan;
          this.createPieChart();
        }
        this.fetchCompanySubscriptions();
      }
    });
  }
  
  createPieChart() {
    const usage = (this.company.usage.n_athletes +
      this.company.usage.n_boxes +
      this.company.usage.n_coaches +
      this.company.usage.n_admins);
    const plan = (this.subscription.plan.n_admins +
      this.subscription.plan.n_athletes +
      this.subscription.plan.n_boxes +
      this.subscription.plan.n_coaches);

    this.pie.results = [
      {
        "name": "Uso del plan",
        "value":
          (usage/((plan>0) ? plan : usage))*100
      }
    ];
  }

  getDaysUntilFinishesText() {
    const now = new Date();
    const diff = moment(this.subscription.end_date).diff(now, 'days');

    return this.subscription.active ? `Finalizará en ${diff} días` : 'Empresa no activa';
  }

  endSubscription() {
    if(confirm("¿Estás seguro que quieres finalizar tu suscripción? Tu empresa y tus atletas perderán acceso a la aplicación cuando finalice la actual suscripción. Recuerda que si quieres cambiar de tarifa, puedes hacerlo mediante el botón 'Cambiar tarifa'.")) {
      this.api.deleteCancelSubscription(this.subscription.id.toString()).subscribe(
        data => {
          this.auth.refreshToken();
        }
      );

    }
  }

  onCompanyPlanChanges(s:Subscription) {
    this.appChangeCompanyPlanDialog = false;
    if(s) {
      this.auth.refreshToken();
      this.fetchCompanySubscriptions();
    }
  }

  private fetchCompanySubscriptions() {
    this.api.companySubscriptions(this.company.id).subscribe(
      data => this.company_subscriptions = data.data
    );
  }
}
