import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ToastrService } from "ngx-toastr";
import { CompanyService } from "src/app/services/company.service";

@Component({
  selector: "app-company-profile",
  templateUrl: "./company-profile.component.html",
  styleUrls: ["./company-profile.component.scss"],
})
export class CompanyProfileComponent implements OnInit {
  updateInfoForm: FormGroup;
  imgFile: any;
  fileName: any;
  imgSrc: any;
  institutionId!: number;
  imgFormatError: boolean = false;
  fileSizeError: boolean = false;
  company: any;

  private emailPattern =
    "(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])";

  constructor(
    private fb: FormBuilder,
    private toastr: ToastrService,
    private companyService: CompanyService
  ) {
    this.updateInfoForm = this.fb.group({
      companyName: ["", [Validators.required, Validators.minLength(6)]],
      companyUsername: ["", [Validators.required]],
      companyAddress: ["", [Validators.required, Validators.minLength(6)]],
      companyCity: ["", [Validators.required, Validators.minLength(3)]],
      companyPhone: [
        "",
        [
          Validators.required,
          Validators.minLength(11),
          Validators.pattern("^[0-9]*$"),
        ],
      ],
      companyEmail: [
        "",
        [Validators.required, Validators.pattern(this.emailPattern)],
      ],
      companyDescription: ["", [Validators.required, Validators.minLength(10)]],
      companyLogo: ["", Validators.required],
    });

    this.companyService.getCompanyById(1).subscribe((company) => {
      this.company = company;
      console.log(this.company);
    });
  }

  get formControls() {
    return this.updateInfoForm.controls;
  }

  ngOnInit(): void {
    this.updateInfoForm.patchValue({
      companyName: this.company.name,
      companyUsername: this.company.username,
      companyEmail: this.company.email,
      companyPhone: this.company.phone,
      companyAddress: this.company.address,
      companyCity: this.company.city,
      companyDescription: this.company.description,
      companyLogo: this.company.image,
    });
  }

  // Check file type
  checkFileType(file: File): boolean {
    const imageTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg"]; // Add more types if needed
    return imageTypes.includes(file.type);
  }

  onFileChange(event: any) {
    this.imgFile = <File>event.target.files[0];
    this.fileName = this.imgFile.name;

    console.log(this.imgFile);

    if (this.checkFileType(this.imgFile)) {
      let reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload = (event: any) => {
        this.imgSrc = event.target.result;
        this.updateInfoForm.patchValue({
          image: this.imgSrc,
        });
      };
    } else {
      // Use toastr service to show error message
      this.toastr.error("Please select correct image format", "Error", {
        timeOut: 3000,
        progressBar: true,
        progressAnimation: "increasing",
        closeButton: true,
        positionClass: "toast-top-center",
      });
      this.imgFormatError = true;
    }

    /* checking file size here is greater than 2MB */
    if (this.imgFile.size > 2000000) {
      this.fileSizeError = true;
    } else {
      this.fileSizeError = false;
    }
  }

  updateInfo() {
    if (this.updateInfoForm.invalid) {
      return;
    }
  }
}