import {Component, NgZone, OnInit,AfterContentInit, AfterViewInit, ElementRef, ViewChild} from "@angular/core";
import {DetailedUser} from "../../auth/user.model";
import {ActivatedRoute} from "@angular/router";
import {AuthService} from "../../auth/auth.service";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {forbiddenValidator} from "../../auth/signup/custom.validator";
import {} from 'googlemaps';
import {MapsAPILoader} from '@agm/core';
import {Router} from "@angular/router";


@Component({
  selector: 'user-edit',
  templateUrl: 'user.edit.component.html',
  styleUrls: ['user.edit.component.css', '../user.page/user.page.component.css']

})

export class UserEditComponent implements OnInit, AfterViewInit,AfterContentInit {


  userEditForm: FormGroup;
  userId: number;
  sub: any;
  user: DetailedUser;
  age: string;
  public cityC: FormControl;

  @ViewChild("search")
  public searchElementRef: ElementRef;


  days: number[] = [];
  years: number[] = [];
  months: any[] = [
    {name: "Jan", num: 1},
    {name: "Feb", num: 2},
    {name: "Mar", num: 3},
    {name: "Apr", num: 4},
    {name: "May", num: 5},
    {name: "Jun", num: 6},
    {name: "Jul", num: 7},
    {name: "Aug", num: 8},
    {name: "Sep", num: 9},
    {name: "Oct", num: 10},
    {name: "Nov", num: 11},
    {name: "Dec", num: 12}
  ];

  genders: string[] = ['Male', 'Female', 'Agender', 'Androgyne', 'Androgynous', 'Bigender', 'Cis', 'Cisgender', 'Cis Female', 'Cis Male', 'Cis Man',
    'Cis Woman', 'Cisgender Female', 'Cisgender Male', 'Cisgender Man', 'Cisgender Woman', 'Female to Male', 'FTM',
    'Gender Fluid', 'Gender Nonconforming', 'Gender Questioning', 'Gender Variant', 'Genderqueer', 'Intersex', 'Male to Female',
    'MTF', 'Neither', 'Neutrois', 'Non-binary', 'Other', 'Pangender', 'Trans', 'Trans*', 'Trans Female', 'Trans* Female', 'Trans Male',
    'Trans* Male', 'Trans Man', 'Trans* Man', 'Trans Person', 'Trans* Person', 'Trans Woman', 'Trans* Woman', 'Transfeminine', 'Transgender',
    'Transgender Female', 'Transgender Male', 'Transgender Man', 'Transgender Person', 'Transgender Woman', 'Transmasculine', 'Transsexual',
    'Transsexual Female', 'Transsexual Male', 'Transsexual Man', 'Transsexual Person', 'Transsexual Woman', 'Two-Spirit'];

  constructor(private route: ActivatedRoute, private authService: AuthService, private mapsAPILoader: MapsAPILoader, private ngZone: NgZone, private router: Router) {

  }

  ngOnInit() {
    this.cityC = new FormControl()

    this.userEditForm = new FormGroup({
      username: new FormControl("", [Validators.required]),
      firstName: new FormControl("", [Validators.required]),
      lastName: new FormControl("", [Validators.required]),
      email: new FormControl("", [Validators.required, Validators.email]),
      gender: new FormControl("Male", [Validators.required]),
      city: new FormControl(),
      country: new FormControl(),
      about: new FormControl(),
      phoneNumber: new FormControl(),
      facebook: new FormControl(),
      birthDay: new FormControl('Day', [forbiddenValidator(/Day/), Validators.required]),
      birthMonth: new FormControl('Month', [forbiddenValidator(/Month/), Validators.required]),
      birthYear: new FormControl('Year', [forbiddenValidator(/Year/), Validators.required]),
      ageVisibility: new FormControl(true),

    });

    this.authService.userObservable
      .subscribe(value => {
        this.user = value;

        if (!this.user.profilePicture) {
          this.user.profilePicture = '../../assets/images/default-profile.jpg'
        }


        switch (this.user.dateOfBirthVisible) {
          case true:
            switch (this.user.yearVisible) {
              case true:
                this.userEditForm.controls.ageVisibility.setValue("full");
                break;

              case false:
                this.userEditForm.controls.ageVisibility.setValue("dateOnly");
                break;
            }

            break;

          case false:
            this.userEditForm.controls.ageVisibility.setValue("none");
            break;

        }

        var dateOfBirth: Date = new Date(this.user.dateOfBirth);

        this.userEditForm.controls.username.setValue(this.user.username);
        this.userEditForm.controls.firstName.setValue(this.user.firstName);
        this.userEditForm.controls.lastName.setValue(this.user.lastName);
        this.userEditForm.controls.birthDay.setValue(dateOfBirth.getDate());
        this.userEditForm.controls.birthMonth.setValue(dateOfBirth.getMonth());
        this.userEditForm.controls.birthYear.setValue(dateOfBirth.getFullYear());
        this.userEditForm.controls.email.setValue(this.user.email);

        // temp solution - so we get defult vaiuse on first update
        if (!this.user.hometown.city == null)
        // this.userEditForm.controls.city.setValue(this.user.hometown.city + ',' + this.user.hometown.country);
          this.searchElementRef.nativeElement.value = this.user.hometown.city + ',' + this.user.hometown.country
          this.userEditForm.controls.country.setValue(this.user.hometown.country);
          this.userEditForm.controls.gender.setValue(this.user.gender);
          this.userEditForm.controls.about.setValue(this.user.about);
        //  }


      });


    for (var d = 1; d <= 31; d++) {
      this.days.push(d);

    }


    var startYear = 1930;
    var currentYear = new Date().getFullYear();

    for (var y = startYear; y <= currentYear; y++) {
      this.years.push(y)
    }


  }


  ngAfterViewInit() {


  }

  ngAfterContentInit(){

    this.mapsAPILoader.load().then(() => {
      console.log("loading google")
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["(cities)"]
      });
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          //verify result
          // if (place.geometry === undefined || place.geometry === null) {
          //   return;
          // }

        });
      });
    });

  }

  onSubmit() {


    let loc = this.searchElementRef.nativeElement.value.split(",");
    console.log(loc)

    let cit: string = "";
    let cont: string = "";

    if (loc.length == 1)
      cont = loc[0]
    else if (loc.length == 2) {
      cont = loc[1]
      cit = loc [0]
    }

    else if (loc.length > 2) {
      cit = loc.slice(0, loc.length - 1).join();
      cont = loc[loc.length - 1]


    }


    var dateOfBirth = new Date(
      this.userEditForm.value.birthYear,
      this.userEditForm.value.birthMonth,
      this.userEditForm.value.birthDay
    );

    var dateOfBirthVisible: boolean;
    var yearVisible: boolean;
    switch (this.userEditForm.value.ageVisibility) {
      case "full":
        dateOfBirthVisible = true;
        yearVisible = true;
        break;

      case "dateOnly":
        dateOfBirthVisible = true;
        yearVisible = false;
        break;

      case "none":
        dateOfBirthVisible = false;
        yearVisible = false;
        break;

    }


    // const user = new DetailedUser(this.userEditForm.value.firstName,
    //   this.userEditForm.value.lastName,
    //   this.userEditForm.value.lastName.userName,"temp","temp",dateOfBirth.toDateString(),dateOfBirthVisible,yearVisible
    //)

    // const user = new DetailedUser(this.user._id,this.user.userId,this.userEditForm.value.userName,this.userEditForm.value.firstName,this.userEditForm.value.lastName,
    //   "temp",dateOfBirth.toISOString,dateOfBirthVisible,yearVisible,this.user.createdAt,this.user.facebook,this.user.profilePicture,this.user
    //   )

    let updatedUser: any = {}; //Object.assign({}, this.user);
    updatedUser.firstname = this.userEditForm.value.firstName;
    updatedUser.lastname = this.userEditForm.value.lastName;
    updatedUser.username = this.userEditForm.value.username;
    updatedUser.date_of_birth = dateOfBirth.toISOString();
    updatedUser.dateOfBirthVisible = dateOfBirthVisible;
    updatedUser.yearVisible = yearVisible;
    updatedUser.gender = this.userEditForm.value.gender;
    updatedUser.about = this.userEditForm.value.about;
    updatedUser.email = this.userEditForm.value.email;

    if (cit.length > 1)
    updatedUser.hometown = {"city": cit, "country": cont};


    this.authService.update2(updatedUser)
      .subscribe(
        (response) => {
          console.log(response)
          this.router.navigateByUrl('/');


        },


        (error) => console.log(error)
      );
  }


    // console.log(this.userEditForm.value);
    // console.log(this.searchElementRef.nativeElement.value)




}

<form [formGroup]="userEditForm">
  <div *ngIf="user" class="d-flex justify-content-center">
    <div class="m-0 px-4 col-sm-12 col-xs-12 col-md-8 d-flex flex-wrap">
      <div class="card mt-5 p-0 col-12">
        <div id="profile-header" class="card-header d-flex flex-nowrap align-items-end">
          <div class="justify-content-start mr-auto">
            <h3 class="text-left">General Details</h3>
          </div>
        </div>
        <div id="profile-section-0.5">
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <h4 class="text-left">Profile Picture</h4>
              </div>
              <div class="card-text">
                <div class="profile-item-content d-flex flex-nowrap">
                  <div class="image-cropper">
                    <img id="profile-picture" class="mr-3 circle" [src]="user.profilePicture" alt="">
                  </div>
                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    Change Profile Picture
                  </button>
                  <!-- Modal -->
                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                       aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          ...
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- ***first and last name*** -->
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <!--  <h4 class="text-left">Name</h4> -->
              </div>
            </div>
          </div>
        </div>
        <div id="profile-section-1">

          <!-- ***first and last name*** -->
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <h4 class="text-left">Name</h4>
              </div>
              <div class="card-text profile-item-content d-flex flex-nowrap form-group">
                <input type="text"
                       id="firstName"
                       class="form-control form-control-lg mr-2"
                       formControlName="firstName"
                       placeholder="First name">
                <span *ngIf="!userEditForm.get('firstName').valid"
                      class="help-block">Please enter valid first name</span>
                <input type="text" id="lastName" class="form-control form-control-lg ml-2"
                       formControlName="lastName" placeholder="Last name">
                <span *ngIf="!userEditForm.get('lastName').valid" class="help-block">Please enter valid last name</span>
              </div>
            </div>
          </div>
          <!-- ***USER NAME*** -->
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <h4 class="text-left">Display Name</h4>
              </div>
              <div class="card-text profile-item-content  d-flex flex-nowrap">
                <input type="text" id="username" class="form-control form-control-lg mr-2"
                       formControlName="username" placeholder="Display Name">
                <span *ngIf="!userEditForm.get('username').valid" class="help-block">Please enter valid user name</span>
              </div>
            </div>
          </div>
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <h4 class="text-left">Email</h4>
              </div>
              <div class="card-text profile-item-content  d-flex flex-nowrap">
                <input type="text" id="email" class="form-control form-control-lg mr-2"
                       formControlName="email" placeholder="partyQween@chillz.com">
                <span *ngIf="!userEditForm.get('username').valid" class="help-block">Please enter valid email</span>
              </div>
            </div>
          </div>


          <!-- ***LOCATIONS*** -->
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <h4 class="text-left">Hometown</h4>
              </div>
              <div class="card-text profile-item-content d-flex flex-nowrap">
                <div class="form-group">
                  <input type="text"
                         id="hometownCity"
                         class="form-control form-control-lg mr-2"
                         placeholder="search for location"
                         autocorrect="off"
                         autocapitalize="OFF"
                         spellcheck="off"
                         formControlName="city"
                         [formControl]="cityC"
                         #search>
                  <input type="text" id="hometownCountry" class="form-control form-control-lg mr-2"
                         formControlName="country" placeholder="Country">
                </div>
              </div>
            </div>
          </div>
          <!--&lt;!&ndash; ***GENDER*** &ndash;&gt;-->
          <!--<div class="card-block d-flex flex-nowrap align-items-end">-->
          <!--<div class="d-flex profile-item card-title">-->
          <!--<div class="profile-item-label">-->
          <!--<h4 class="text-left">Gender</h4>-->
          <!--</div>-->
          <!--<div class="card-text profile-item-content d-flex flex-nowrap">-->
          <!--<div class="form-group">-->
          <!--<label class="custom-control custom-radio">-->
          <!--<input id="male" value="male" type="radio" class="custom-control-input" formControlName="gender">-->
          <!--<span class="custom-control-indicator"></span>-->
          <!--<span class="custom-control-description">Male</span>-->
          <!--</label>-->
          <!--<label class="custom-control custom-radio">-->
          <!--<input id="female" value="female" type="radio" class="custom-control-input"-->
          <!--formControlName="gender">-->
          <!--<span class="custom-control-indicator"></span>-->
          <!--<span class="custom-control-description">Female</span>-->
          <!--</label>-->
          <!--</div>-->
          <!--</div>-->
          <!--</div>-->
          <!--</div>-->
          <!-- ***GENDER*** -->
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <h4 class="text-left">Gender</h4>
              </div>
              <div class="card-text profile-item-content d-flex flex-nowrap">
                <select formControlName="username" class=" form-control-lg custom-select" id="gender"
                        formControlName="gender">
                  <option *ngFor="let gen of genders">{{gen}}</option>
                </select>
                <div class="card-text profile-item-content d-flex flex-nowrap">
                  <div class="form-group">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- ***BIRTH DAY*** -->
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <h4 class="text-left">Birthday</h4>
              </div>
              <div class="card-text profile-item-content d-flex flex-nowrap">
                <div class="form-group">
                  <select class=" form-control-lg custom-select" id="dateOfBirthDay" formControlName="birthDay">
                    <option *ngFor="let day of days" [value]="day">{{day}}</option>
                  </select>
                  <select class="form-control-lg custom-select" id="dateOfBirthMonth" formControlName="birthMonth">
                    <option *ngFor="let month of months; let i=index" [value]="i">{{month.name}}</option>
                  </select>
                  <select class="form-control-lg custom-select" id="dateOfBirthYear" formControlName="birthYear">
                    <option *ngFor="let year of years" [value]="year">{{year}}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="card-block d-flex flex-nowrap align-items-end">
            <div class="d-flex profile-item card-title">
              <div class="profile-item-label">
                <h4 class="text-left">Birthday Privacy</h4>
              </div>
              <div class="card-text profile-item-content d-flex flex-nowrap">
                <div class="form-group">
                  <select class="form-control-lg custom-select" id="ageVisibility" formControlName="ageVisibility">
                    <option value="full" selected>Expose my full date of birth (and age) to others</option>
                    <option value="dateOnly">Expose my birthday date only</option>
                    <option value="none">Expose nothing to others</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="profile-section-2" class="card mt-5 p-0 col-12">
        <div class="card-block d-flex flex-nowrap align-items-end">
          <div class="d-flex profile-item card-title">
            <div class="profile-item-label">
              <h4 class="text-left">About</h4>
            </div>
            <div class="card-text profile-item-content">
                     <textarea class="form-control" formControlName="about" id="about" rows="3"
                               placeholder="Write here a short text which you would like others to know about you"
                               style="width: 70%"></textarea>
            </div>
          </div>
        </div>
      </div>

      <button type="submit" class="btn btn-default" [disabled]="!userEditForm.valid" (click)="onSubmit()">Submit
      </button>
    </div>
  </div>
</form>