import { Component, OnInit } from "@angular/core";
import { Title } from "@angular/platform-browser";
import { FormGroup, FormBuilder, Validators, FormArray } from "@angular/forms";
import { UserService } from "@app/services/user.service";
import { CatalogsService } from "@app/services/catalogs.service";

import Swal from "sweetalert2";
import { AuthService } from "@app/services/auth2.service";
import {
  ValidatorComponent,
  PasswordStrengthValidator,
} from "../plugins/validator/validator.component";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
})
export class ProfileComponent implements OnInit {
  title = "Perfil del usuario";
  userForm: FormGroup;
  submitted: boolean = false;
  isLoadingOrganization: boolean;
  first_name: string = "Usuario";
  user: any;
  editProfile: boolean;
  distributor: any;
  codigo_tarifa: any;

  constructor(
    private titleService: Title,
    private userService: UserService,
    private catalogsService: CatalogsService,

    private formBuilder: FormBuilder,
    private authService: AuthService
  ) {}

  email: string;

  ngOnInit() {
    Swal.fire({
      allowOutsideClick: false,
      type: "info",
      text: "Espere por favor...",
    });
    Swal.showLoading();

    this.catalogsService.getCatalogByName("distribuidoras").subscribe((res) => {
      this.distributor = res["data"]["catalogo"]["records"];
    });

    this.catalogsService.getCatalogByName("tarifas").subscribe((res) => {
      this.codigo_tarifa = res["data"]["catalogo"]["records"];
    });

    this.userService
      .getUserById(this.authService.getUserId())
      .subscribe((ans) => {
        this.user = ans["data"]["user"];
        Swal.close();
        this.editProfile = true;
        this.first_name = this.user.first_name;
        this.userForm = this.formBuilder.group(
          {
            first_name: [this.user.first_name, Validators.required],
            last_name: [this.user.last_name, Validators.required],
            email: [this.user.email, Validators.required],
            phone: [
              this.user.phone_number == undefined ? "" : this.user.phone_number,
              Validators.required,
            ],
            distribuidora: [this.user.distribuidora],
            tarifa: [this.user.cod_tarifa],
            password: [
              "",
              [Validators.minLength(8), PasswordStrengthValidator],
            ],
            confirm_password: [""],
          },
          {
            validator: ValidatorComponent("password", "confirm_password"),
          }
        );
      });

    this.titleService.setTitle(this.title);
  }

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

  editUser(form: any) {
    this.submitted = true;
    // stop here if form is invalid
    if (this.userForm.invalid) {
      return;
    }

    let user = {
      first_name: this.f.first_name.value,
      last_name: this.f.last_name.value,
      email: this.f.email.value,
      phone_number: this.f.phone.value,
      distribuidora: this.f.distribuidora.value,
      cod_tarifa: this.f.tarifa.value,
    };

    if (this.f.password.value != "" && this.f.confirm_password.value != "") {
      user["password"] = this.f.password.value;
      user["confirm_password"] = this.f.confirm_password.value;
    }

    Swal.fire({
      allowOutsideClick: false,
      type: "info",
      text: "Espere por favor...",
    });
    Swal.showLoading();
    this.userService.editCustomer(this.authService.getUserId(), user).subscribe(
      (success) => {
        if (success) {
          Swal.fire({
            allowOutsideClick: false,
            type: "success",
            showCancelButton: false,
            title: "Exito",
            confirmButtonText: "Se ha actualizado su perfil exitosamente",
          }).then((result) => {
            Swal.close();
            window.location.reload();
          });
        }
      },
      (err) => {
        Swal.fire({
          type: "error",
          title: "Error al guardar",
          text: err.message,
        });
      }
    );
  }

  helpModal() {
    Swal.fire({
      title: "<strong>¿Dónde encuentro mi tipo de tarifa?</strong>",
      type: "info",
      html:
        "<p style='text-align: left'>Si tu distribuidora de energía es del grupo de empresas AES, puedes verificar el tipo de tarifa en la siguiente imagen:</p>" +
        '<img alt="Factura AES" src="./assets/img/AESFactura.png" style="width: 100%;"/><br><br> ' +
        '<p style="text-align: left">Para más información puedes visitar el sitio oficial de <a href="http://www.aes-elsalvador.com/servicio-al-cliente/conoce-tu-factura/" target="_blank">AES</a></p>' +
        "<br><br>" +
        "<p style='text-align: left'>Si tu distribuidora de energía es DelSur, puedes verificar el tipo de tarifa en la siguiente imagen:</p>" +
        '<img alt="Factura AES" src="./assets/img/DelSurFactura2.png" style="width: 100%;"/>' +
        '<p style="text-align: left">Para más información puedes visitar el sitio oficial de <a href="https://www.delsur.com.sv/conoce-tu-factura/" target="_blank">DelSur</a></p>' +
        "<br><br>",
      showCloseButton: true,
      width: 600,
      confirmButtonText: '<i class="fa fa-thumbs-up"></i> Cerrar',
      confirmButtonAriaLabel: "Thumbs up, great!",
    });
  }
}