import { Component, OnInit } from "@angular/core";
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from "@angular/forms";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { MatButtonModule } from "@angular/material/button";

import { AddAction } from "../../models/add-action.enum";

import { AircraftService } from "../../services/aircraft.service";
import { ServiceComm } from "../../services/service-comm.service";

@Component({
  selector: "app-new-aircraft",
  templateUrl: "./new-aircraft.component.html",
  styleUrls: ["./new-aircraft.component.css"],
  imports: [
    TranslateModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatInputModule,
    MatButtonModule,
  ],
})
export class NewAircraftComponent implements OnInit {
  public addForm: FormGroup;
  public imageError: string;
  private selectedFile: string;

  constructor(
    private serviceComm: ServiceComm,
    private serviceApi: AircraftService,
    private translateService: TranslateService,
  ) {
    this.addForm = new FormGroup(
      {
        aircraftName: new FormControl("", Validators.required),
      },
      { updateOn: "blur" },
    );
  }

  ngOnInit() {
    this.serviceComm.forceTranslateTitle.subscribe((data) => {
      if (data === true) {
        this.updateTitle();
      }
    });

    this.updateTitle();
  }

  onSubmit(formData) {
    if (formData.invalid) {
      return;
    }

    this.serviceApi
      .addAircraft(formData.aircraftName, this.selectedFile)
      .subscribe(() => {
        this.serviceComm.refreshData(AddAction.Aircraft);
      });
  }

  public onFileChanged(fileInput: any) {
    const file = fileInput.dataTransfer
      ? fileInput.dataTransfer.files[0]
      : fileInput.target.files[0];
    const allowed_types = ["image/png", "image/jpeg"];
    const max_size = 20971520;

    if (!allowed_types.includes(file.type)) {
      this.imageError = "Only Images are allowed ( JPG | PNG )";
    } else if (file.size > max_size) {
      this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb";
    } else {
      const reader = new FileReader();
      reader.onload = this.checkAndExtractDataToBase64.bind(this);
      reader.readAsDataURL(fileInput.target.files[0]);
    }
  }

  private checkAndExtractDataToBase64(e: any) {
    const max_height = 15200;
    const max_width = 25600;

    const image = new Image();
    image.src = e.target.result;
    image.onload = (rs) => {
      const img_height = rs.currentTarget["height"];
      const img_width = rs.currentTarget["width"];

      if (img_height > max_height && img_width > max_width) {
        this.imageError =
          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
      } else {
        const imgBase64Path = e.target.result;
        this.selectedFile = imgBase64Path;
        this.imageError = "OK";
      }
    };
  }

  private updateTitle() {
    this.translateService.get("NewAircraft_Title").subscribe((data) => {
      this.serviceComm.updatedComponentTitle(data);
    });
  }
}