import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { Message } from 'primeng/api';
import { IPhases } from '../../shared/core/Questionnaire/IPhases';
import { IPhaseStatus } from '../../shared/core/Questionnaire/IPhaseStatus';
import { ActivityServicesService } from '../../shared/services/activity-services.service';

@Component({
  selector: 'app-job-phases',
  templateUrl: './job-phases.component.html',
  styleUrls: ['./job-phases.component.css'],
  providers: [ActivityServicesService]
})
export class JobPhasesComponent implements OnInit {
  columns: { field: string; header: string; width: string }[];
  phases: any;
  brands: any;
  checked = true;


  // Input
  @Input() jobPlanId: number;

  // Phases
  phaseList: IPhases[];
  pending: number;
  actioned: number;

  // Dummy
  noNotes: string;

  // Phase status
  phaseStatus: IPhaseStatus[];
  // Paginator
  numberOfRows = 20;
  // Load size
  pageSizes: { label: string; value: number; }[];
  // Serarch Key
  serachWord: string;
  // No data Message
  noDataMessage: Message[] = [];
  // No data flag
  nodataFlag = true;

  constructor(private router: Router, private activityServices: ActivityServicesService) {
    this.columns = [
      { field: 'cPhase', header: 'Phases', width: '30%' },
      { field: 'cPending', header: 'Pending', width: '10%' },
      { field: 'cActioned', header: 'Actioned', width: '15%' },
      { field: 'cComplete', header: 'Complete', width: '10%' },
      { field: 'cClosed', header: 'Closed Section', width: '10%' },
      { field: 'cInternalNotes', header: 'Internal Notes', width: '20%' },
    ];

    this.pageSizes = [
      {
        label: '20 record per page',
        value: 20
      },
      {
        label: '40 record per page',
        value: 40
      },
      {
        label: '100 record per page',
        value: 100
      }];
  }

  ngOnInit() {

    // No record message
    this.noDataMessage = [];
    this.noDataMessage.push({ severity: 'info', summary: 'No Phases Found', detail: '' });

    // Get All Phases
    this.activityServices.GetAllPhases(this.jobPlanId).subscribe(
      data => { 
        console.log(data);
        this.phaseList = data;
        if (this.phaseList.length > 0) {
          this.nodataFlag = false;
        }
      }
    );

    // Add dummy data
    this.noNotes = 'No Notes';
    this.pending = 0;
    this.actioned = 0;

    // Phase status
    this.phaseStatus = [
      {
        Id: 1,
        Description: 'Any'
      },
      {
        Id: 2,
        Description: 'Pending'
      },
      {
        Id: 3,
        Description: 'Actioned'
      },
      {
        Id: 4,
        Description: 'Complete'
      },
      {
        Id: 5,
        Description: 'Close Section'
      },
    ];

    // list of the organisation table columns
    // this.phases = [{
    //   cPhase: 'Phase 1 : Main details',
    //   cPending: '0',
    //   cActioned: '20',
    //   cComplete: '100%',
    //   cClosed: '',
    //   cInternalNotes: 'No Notes'
    // },
    // {
    //   cPhase: 'Phase 1 : Main details',
    //   cPending: '0',
    //   cActioned: '10',
    //   cComplete: '',
    //   cClosed: '',
    //   cInternalNotes: 'No Notes'
    // },
    // {
    //   cPhase: 'Phase 1 : Main details',
    //   cPending: '1994',
    //   cActioned: '20',
    //   cComplete: '',
    //   cClosed: '',
    //   cInternalNotes: 'No Notes'
    // }];
    // this.brands = [
    //   { label: 'Jhon', value: null },
    //   { label: 'Sam', value: 'Sam' },
    //   { label: 'Anna', value: 'Anna' },
    //   { label: 'Betty', value: 'Betty' },
    // ];

  }

  goToQuestinnaire() {
    this.router.navigate(['/questionear', this.jobPlanId]);
  }

  // Load data
  pageSizesChange(e) {
    this.numberOfRows = e.value;
  }

  // Search Phases
  Search() {
    this.activityServices.GetAllPhasesBySearch(this.jobPlanId, this.serachWord).subscribe(
      data => {
        console.log(data);
        this.phaseList = data;
      }
    );
  }
}