import { Component, ViewChild } from "@angular/core";
import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
@Component({
  selector: "app-profil-information",
  templateUrl: "./profil-information.component.html",
  styleUrls: ["./profil-information.component.css"],
})
export class ProfilInformationComponent {
  @ViewChild("f", { read: true }) userProfileForm: NgForm;
  public breadcrumb: any;
  profilInfo: FormGroup;
  activeTab: string = "profile-info2";
  submitted = false;

  url: any = '';

  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.profilInfo = this.formBuilder.group({
      name: ["", Validators.required],
      email: ["", Validators.required],
      phone: ["", Validators.required],
      profilePicture: [null]
    });
  }

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      const file = event.target.files[0];

      // Check if selected file is an image
      if (!file.type.startsWith('image')) {
        alert('Please select an image file.');
        this.profilInfo.patchValue({
          profilePicture: null
        });
        return;
      }

      const reader = new FileReader();
      reader.readAsDataURL(file);

      reader.onload = (e) => {
        this.url = e.target.result;
      };
    }
  }

  public delete() {
    this.url = null;
    this.profilInfo.patchValue({ profilePicture: null });
  }


  selectTab(tabName: string) {
    this.activeTab = tabName;
  }

  get f() {
    return this.profilInfo.controls;
  }

  onProjectInfoSubmit() {
    this.submitted = true;
  }

  cancel() {}

  saveEdit() {
    console.log("save");
  }
}
