import { Component, OnInit } from '@angular/core';
import { ServicesService } from '../../services.service';
import { LoginflowService } from '../../data/loginflow.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { Router } from '@angular/router';
import { ChattingService } from 'src/app/services/chatting/chatting.service';

@Component({
  selector: 'app-studentskin',
  templateUrl: './studentskin.component.html',
  styleUrls: ['./studentskin.component.scss'],
})
export class StudentskinComponent implements OnInit {
  tranferbutton: boolean = true;
  UserSkinColor = 'Default';
  UserHairSkinColor = 'Default';
  UserEyes = 'Default';
  Usereyebrows = 'Default';
  UserMouth = 'Default';
  facialhair = 'Blank';
  Usercloth = 'BlazerShirt';
  transparent = 'Circle';
  clothColor = 'Default';
  clothlogo = 'Bat';
  topselect = 'LongHairStraight';
  glass = 'Default';
  data: any;
  name: any;
  hatcolor = '';
  userid: any;
  imageurl: any;
  imageshow = true;
  urlAvatar: any;
  UserSkinColorArray = ['Tanned', 'Yellow', 'Pale', 'Light', 'Brown', 'DarkBrown', 'Black'];
  UserHairSkinColorArray = ['Auburn', 'Black', 'Blonde', 'Brown', 'BrownDark', 'PastelPink', 'Platinum', 'Red', 'SilverGray'];
  topselectArray = ['NoHair', 'LongHairBigHair', 'LongHairBob', 'LongHairBun', 'LongHairCurly', 'LongHairDreads', 'LongHairFrida', 'LongHairFro', 'LongHairFroBand', 'LongHairNotTooLong', 'LongHairMiaWallace', 'LongHairShavedSides', 'LongHairCurvy', 'LongHairStraight', 'LongHairStraight2', 'LongHairNotTooLong', 'ShortHairDreads01', 'ShortHairDreads02', 'ShortHairFrizzle', 'ShortHairShaggyMullet', 'ShortHairShortCurly', 'ShortHairShortFlat', 'ShortHairShortRound', 'ShortHairShortWaved', 'ShortHairSides', 'ShortHairTheCaesar', 'ShortHairTheCaesarSidePart'];
  UserEyesArray = ['Close', 'Cry', 'Default', 'EyeRoll', 'Happy', 'Hearts', 'Side', 'Squint', 'Surprised', 'WinkWacky', 'Wink', 'Dizzy', ''];
  UsereyebrowsArray = ['FlatNatural', 'DefaultNatural', 'SadConcerned', 'Default', 'SadConcernedNatural', 'RaisedExcitedNatural', 'Angry', 'AngryNatural', 'RaisedExcited', 'UnibrowNatural', 'UpDown'];
  UserMouthArray = ['Concerned', 'Default', 'Disbelief', 'Eating', 'Grimace', 'Sad', 'ScreamOpen', 'Serious', 'Smile', 'Tongue', 'Twinkle', 'Vomit'];
  clothColorArray = ['Black', 'Blue01', 'Blue02', 'Blue03', 'Gray01', 'Gray02', 'Heather', 'PastelBlue', 'PastelGreen', 'PastelOrange', 'PastelRed', 'PastelYellow', 'Pink', 'Red', 'White'];
  UserclothArray = ['BlazerShirt', 'BlazerSweater', 'CollarSweater', 'GraphicShirt', 'Hoodie', 'Overall', 'ShirtCrewNeck', 'ShirtScoopNeck', 'ShirtVNeck'];
  clothlogoArray = ['Bat', 'Bear', 'Cumbia', 'Dear', 'Diamond', 'Hola', 'Pizza', 'Resist', 'Selena', 'SkullOutline'];
  username: any;
  constructor(
    public LoginflowService: LoginflowService,
    public chatService: ChattingService,
    public service: ServicesService,
    public spinner: NgxSpinnerService,
    public router: Router
  ) {

  }

  ngOnInit() {
    var data = window.localStorage.getItem('userdetails');
    if (data != undefined || data != null || data != '') {
      this.data = JSON.parse(<string>data);
      this.name = this.data.aliasname ? this.data.aliasname : this.data.name;
      this.username = this.data.name;
      this.urlAvatar = this.data.avatar_url ? this.data.avatar_url : "https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Default&hairColor=Default&facialHairType=Blank&clotheType=BlazerShirt&clotheColor=Default&graphicType=Bat&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Pale&hatColor=";

    }
    const urlParams = new URLSearchParams(this.urlAvatar);
    this.UserSkinColor = urlParams.get('skinColor');
    this.UserHairSkinColor = urlParams.get('hairColor');
    this.UserEyes = urlParams.get('eyeType');
    this.Usereyebrows = urlParams.get('eyebrowType');
    this.UserMouth = urlParams.get('mouthType');
    this.facialhair = urlParams.get('facialHairType');
    this.Usercloth = urlParams.get('clotheType');
    this.transparent = 'Circle';
    this.clothColor = urlParams.get('clotheColor');
    this.clothlogo = urlParams.get('graphicType');
    this.topselect = urlParams.get('topType');
    this.glass = urlParams.get('accessoriesType');
    this.hatcolor = urlParams.get('hatColor');

  }
  skinClick(item) {
    this.imageshow = false;
    this.UserSkinColor = item;
    this.ChnageAvatrarUrl();
  }
  hairclick(item) {
    this.imageshow = false;
    this.UserHairSkinColor = item;
    this.ChnageAvatrarUrl();
  }
  eyeClick(item) {
    this.imageshow = false;
    this.UserEyes = item;
    this.ChnageAvatrarUrl();
  }
  eyebrows(item) {
    this.imageshow = false;
    this.Usereyebrows = item;
    this.ChnageAvatrarUrl();
  }
  mounthclick(item) {
    this.imageshow = false;
    this.UserMouth = item;
    this.ChnageAvatrarUrl();
  }
  facialhairclick(item) {
    this.imageshow = false;
    this.facialhair = item;
    this.ChnageAvatrarUrl();
  }
  ClothcolorClick(item) {
    this.imageshow = false;
    this.clothColor = item;
    this.ChnageAvatrarUrl();
  }
  ClothClick(item) {
    this.imageshow = false;
    this.Usercloth = item;
    this.ChnageAvatrarUrl();
  }
  Clothlogo(item) {
    this.imageshow = false;
    this.clothlogo = item;
    this.ChnageAvatrarUrl();
  }
  Topclick(item) {
    this.imageshow = false;
    this.topselect = item;
    this.glass = '';
    this.ChnageAvatrarUrl();
  }
  Topclicks(item) {
    this.imageshow = false;
    this.glass = item;
    this.ChnageAvatrarUrl();
  }
  tranferbg(item) {
    this.imageshow = false;
    this.tranferbutton = false;
    this.UserSkinColor = this.UserSkinColorArray[
      Math.floor(Math.random() * this.UserSkinColorArray.length)
    ];
    this.UserHairSkinColor = this.UserHairSkinColorArray[
      Math.floor(Math.random() * this.UserHairSkinColorArray.length)
    ];
    this.topselect = this.topselectArray[
      Math.floor(Math.random() * this.topselectArray.length)
    ];
    this.UserEyes = this.UserEyesArray[
      Math.floor(Math.random() * this.UserEyesArray.length)
    ];
    this.Usereyebrows = this.UsereyebrowsArray[
      Math.floor(Math.random() * this.UsereyebrowsArray.length)
    ];
    this.UserMouth = this.UserMouthArray[
      Math.floor(Math.random() * this.UserMouthArray.length)
    ];
    this.clothColor = this.clothColorArray[
      Math.floor(Math.random() * this.clothColorArray.length)
    ];
    this.Usercloth = this.UserclothArray[
      Math.floor(Math.random() * this.UserclothArray.length)
    ];
    this.clothlogo = this.clothlogoArray[
      Math.floor(Math.random() * this.clothlogoArray.length)
    ];
    this.ChnageAvatrarUrl();

  }
  tranferbgelse(item) {
    this.imageshow = false;
    this.transparent = item;
    this.tranferbutton = true;
  }
  closeClick() {
    this.router.navigate(['sidenav/studentprofile']);
  }
  async uploadimage() {
    this.userid = localStorage.getItem('CisspUserId');
    debugger;
    var data = this.urlAvatar;
    const url = new URL(this.urlAvatar);
    if (url.hostname != "avataaars.io") {
      return this.service.ShowError('Unauthorized Image Url');
    }

    // set avatar
    (await this.chatService.Rclogin(this.username, 'Newpassword02#')).subscribe(auth => {
      let data = JSON.parse(auth["_body"]).data
      const userId = data.userId ;
      this.chatService.RcsetAvatar(this.urlAvatar, userId).then(async (data) => {})
    })

    this.spinner.show();
    await this.LoginflowService.ProfileUpdated(data, this.userid).then(
      (dataset: any) => {
        if (dataset[0].status == 200) {
          var element = document.getElementById('userimage') as HTMLElement;
          element.setAttribute('src', data);
          var list = JSON.parse(<string>dataset[0].json);
          localStorage.setItem(
            'userdetails',
            JSON.stringify(<string>list.data)
          );
          this.spinner.hide();

          this.service.ShowSuccess('Avatar update successfully');
          this.router.navigate(['sidenav/studentprofile']);
        }
      }
    );
    this.spinner.hide();
  }
  Userhatcolor(item) {
    this.imageshow = false;
    this.hatcolor = item;
    this.ChnageAvatrarUrl();
  }
  ChnageAvatrarUrl() {
    this.urlAvatar = 'https://avataaars.io/?avatarStyle=' +
      this.transparent +
      '&topType=' +
      this.topselect +
      '&accessoriesType=' +
      this.glass +
      '&hairColor=' +
      this.UserHairSkinColor +
      '&facialHairType=' +
      this.facialhair +
      '&clotheType=' +
      this.Usercloth +
      '&clotheColor=' +
      this.clothColor +
      '&graphicType=' +
      this.clothlogo +
      '&eyeType=' +
      this.UserEyes +
      '&eyebrowType=' +
      this.Usereyebrows +
      '&mouthType=' +
      this.UserMouth +
      '&skinColor=' +
      this.UserSkinColor +
      '&hatColor=' +
      this.hatcolor;
  }
  retuey() {
    window.location.reload();
  }
}