import { Component, OnInit, Input, Renderer2, ElementRef } from '@angular/core';
import { GithubApiService } from '../shared/github-api.service';

import { UserActivity } from './user-activity.model';

/**
 * User Activity Component: displays a Github user's activity from the Github API.
 * Currently displays pushes to repos and Pull Requests exclusively.
 * ```html
 * <lib-user-activity
 *    userName="jkmdev"
 *    maxEntries=8
 *    title="My User Activity"
 *    fontFamily="Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif"
 *    >
 * </lib-user-activity>
 * ```
 */
@Component({
  selector: 'lib-user-activity',
  templateUrl: './user-activity.component.html',
  styleUrls: ['./user-activity.component.css']
})
export class UserActivityComponent implements OnInit {

  /**
   * (Required) The Github user that the component will display the activity for.
   */
  @Input() userName: string;

  /**
   * (Optional) Specifies the maximum amount of user activities the component will display.
   */
  @Input() maxEntries: number;
  
  /**
   * (Optional) The title that will be displayed at the top of the component.
   */
  @Input() title: string;

  /**
   * (Optional) You can choose the font that will be displayed in this component by passing it here as a string.
   */
  @Input() fontFamily: string;

  /**
   * An object/model specifying how the user's activity should be structured/what it should contain
   */
  userActivity: UserActivity;

  /**
   * A flag specifying if the component encountered an error or not.
   */
  error: boolean;

  /**
   * The specific error message the component will display on error.
   */
  errorMessage: string;

  constructor(
    private componentElement: ElementRef,
    private githubApiService: GithubApiService, 
    private renderer: Renderer2
  ) {
    this.userActivity = new UserActivity(); 
    this.maxEntries = 8;
    this.title = "My Github Activity";
    this.error = false;
    this.errorMessage = "Can't display content.";
    this.fontFamily = "Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif";
    this.userName = '';
  }

  ngOnInit() {
    this.renderer.setStyle(this.componentElement.nativeElement, 'font-family', this.fontFamily);
    this.githubApiService.getUserEvents(this.userName)
      .subscribe(
        (response) => {
          this.userActivity = response;
        },
        (error) => {
          console.log(error);
          this.error = true;
          // this.errorMessage = `Can't display content. Error status: ${error.status}`;
          this.errorMessage = `Can't display content. Error status: ${JSON.stringify(error)}`;
        }
      );
  }

}