import { Component, OnInit } from '@angular/core';

export type Star = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5;
export const STAR_CLASS_MAP = {
  0: 'far fa-star',
  0.5: 'fas fa-star-half',
  1: 'fas fa-star',
}
export const MAX_STARS = 5;

export interface Link {
  href: string;
  name: string;
}
export interface Skill {
  name: string;
  iconHtml: string;
  starCount?: Star;
  description?: {
    text?: string;
    links?: Link[];
  };
}
@Component({
  selector: 'app-resume-pdf',
  templateUrl: './resume-pdf.component.html',
  styleUrls: ['./resume-pdf.component.scss']
})
export class ResumePdfComponent implements OnInit {

  public focus = false;
  public focus1 = false;

  displayedPersonalColumns = [
    'name',
    'birthdate',
    'location'
  ];
  personalData = {
    name: 'Christian Ziermann',
    birthdate: new Date('September 3, 1996'),
    location: 'Aachner Straße 545 Cologne 50933',
  }
  public softSkills: Skill[] = [
    {
      name: 'Teamwork',
      iconHtml: '<i class="fas fa-users"></i>',
      starCount: 4
    },
    {
      name: 'Communication',
      iconHtml: '<i class="fas fa-comments"></i>',
      starCount: 4.5
    },
  ];

  public likeToLearn: Skill[] = [
    {
      name: 'IoT',
      iconHtml: '<i class="fas fa-microchip"></i>',
    },
    {
      name: 'Deep Learning',
      iconHtml: '<i class="fas fa-cogs"></i>',
    },
    {
      name: 'Game Development',
      iconHtml: '<i class="fas fa-gamepad"></i>',
    },
    {
      name: 'Vuejs',
      iconHtml: '<i class="fab fa-vuejs"></i>',
    },
  ];




  public hobbys: Skill[] = [
    {
      name: 'Gaming',
      iconHtml: '<i class="fas fa-gamepad"></i>',
    },
    {
      name: 'Music',
      iconHtml: '<i class="fas fa-music"></i>',
      description: {
        links: [
          {
            href: '/music',
            name: 'Checkout'
          }
        ]
      }
    },
    {
      name: 'Programming',
      iconHtml: '<i class="fas fa-code"></i>',
    },
    {
      name: 'Cooking',
      iconHtml: '<i class="fas fa-utensils"></i>',
    },
    {
      name: 'Skating',
      iconHtml: '<i class="fas fa-snowboarding"></i>',
    },
    {
      name: 'Pen & Paper',
      iconHtml: '<i class="far fa-edit"></i>',
    },
  ];

  public languages: Skill[] = [
    {
      name: 'German (native language)',
      iconHtml: '<img height="30" src="/assets/icons/flags/german.png" alt="German">',
      starCount: 5
    },
    {
      name: 'English',
      iconHtml: '<img height="30" src="/assets/icons/flags/english.png" alt="English">',
      starCount: 3.5
    },
  ];

  public skills: Skill[] = [
    {
      name: 'Unit-testing',
      iconHtml: '<i class="fas fa-vial"></i>',
      starCount: 3
    },
    {
      name: 'Jira',
      iconHtml: '<i class="fab fa-jira"></i> ',
      starCount: 4
    },
    {
      name: 'Apache',
      iconHtml: '<img height="30" src="/assets/icons/apache.svg" alt="Apache">',
      starCount: 2.5
    },
    {
      name: 'Nginx',
      iconHtml: '<img height="30" src="/assets/icons/nginx.svg" alt="Nginx">',
      starCount: 4.5
    },
    {
      name: 'Jenkins',
      iconHtml: '<i class="fab fa-jenkins"></i>',
      starCount: 3
    },
    {
      name: 'SQL',
      iconHtml: '<i class="fas fa-database"></i>',
      starCount: 3.5
    },
    {
      name: 'Python',
      iconHtml: '<i class="fab fa-python"></i>',
      starCount: 2
    },
    {
      name: 'PHP',
      iconHtml: '<i class="fab fa-php"></i>',
      starCount: 4
    },
    {
      name: 'HTML & CSS',
      iconHtml: '<i class="fab fa-html5"></i>',
      starCount: 4.5
    },
    {
      name: 'Angular 2+ & AngularJS',
      iconHtml: '<i class="fab fa-angular"></i>',
      starCount: 4.5
    },

    {
      name: 'NestJs',
      iconHtml: '<img height="30" src="/assets/icons/nestjs.svg" alt="NestJs">',
      starCount: 4
    },
    {
      name: 'Twig',
      iconHtml: '<img height="30" src="/assets/icons/twig.svg" alt="twig">',
      starCount: 4.5
    },
    {
      name: 'Electron',
      iconHtml: '<i class="fas fa-atom"></i>',
      starCount: 4
    },
    {
      name: 'Typescript',
      iconHtml: '<img height="30" color="white" class="skill-logo" src="/assets/icons/typescript.svg" alt="Typescript">',
      starCount: 4
    },
    {
      name: 'Ubuntu',
      iconHtml: '<i class="fab fa-ubuntu"></i>',
      starCount: 4
    },
    {
      name: 'Docker',
      iconHtml: '<i class="fab fa-docker"></i>',
      starCount: 3
    },
    {
      name: 'Kubernetes',
      iconHtml: '<img height="30" src="/assets/icons/kubernetes.svg" alt="Kubernetes">',
      starCount: 2
    },
    {
      name: 'Git',
      iconHtml: '<i class="fab fa-git"></i>',
      starCount: 4.5
    },
    {
      name: 'NPM',
      iconHtml: '<i class="fab fa-npm"></i>',
      starCount: 5
    },

    {
      name: 'Unity',
      iconHtml: '<i class="fab fa-unity"></i>',
      starCount: 2
    },

    {
      name: 'Godot',
      iconHtml: '<img height="30" src="/assets/icons/kubernetes.svg" alt="Kubernetes">',
      starCount: 4.5
    },
    {
      name: 'C#',
      iconHtml: '<div height="30">C#</div>',
      starCount: 4.5
    },

  ];
  
  constructor() { }

  ngOnInit(): void {
  }


  getStarClass(starCount: Star, starIndex: number) {
    const starSizes: number[] = [];
    let starCountWorker = starCount;
    for (let starIterator = 1; starIterator <= MAX_STARS; starIterator++) {
      if (starCountWorker >= 1) {
        starCountWorker = (starCountWorker - 1) as Star;
        starSizes.push(1);
      } else {
        if (starCountWorker === 0) {
          starSizes.push(starCountWorker);
          continue;
        }
        starSizes.push(starCountWorker);
        starCountWorker = 0;
      }
    }
    return STAR_CLASS_MAP[starSizes[starIndex]];
  }

}
