import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Personalizar } from '../../interfaces/Personalizar.interface';
import { PersonalizarService } from '../../services/personalizar.service';
import Swal from 'sweetalert2';
import { EnviarInfoService } from '../../services/enviar-info.service';

@Component({
  selector: 'app-personalizar',
  templateUrl: './personalizar.component.html',
  styleUrl: './personalizar.component.css'
})
export class PersonalizarComponent implements OnInit {

  public url: any = '';
  public msg = "";
  public data!: Personalizar;
  public isLoading: boolean = true;
  public color1: string = '';
  public color2: string = '';
  public color3: string = '';
  public color4: string = '';
  public color5: string = '';
  public selectedOptionC: string = ''
  public selectedOptionT: string = ''
  public color: string = '';
  public textColor: string = '';
  public colorOptions = [
    { value: 'solido', typeColor: 'Color sólido' },
    { value: 'degradado', typeColor: 'Degradado' },
    { value: 'textura', typeColor: 'Textura' },
  ]
  public img = [
    { src: 'assets/img/texturas/2.png', id: 2, checked: false },
    { src: 'assets/img/texturas/3.png', id: 3, checked: false },
    { src: 'assets/img/texturas/4.png', id: 4, checked: false },
    { src: 'assets/img/texturas/5.png', id: 5, checked: false },
    { src: 'assets/img/texturas/6.png', id: 6, checked: false },
    { src: 'assets/img/texturas/7.png', id: 7, checked: false },
    { src: 'assets/img/texturas/9.png', id: 9, checked: false },
    { src: 'assets/img/texturas/10.png', id: 10, checked: false },
    { src: 'assets/img/texturas/11.png', id: 11, checked: false },
    { src: 'assets/img/texturas/12.png', id: 12, checked: false },
    { src: 'assets/img/texturas/13.png', id: 13, checked: false },
    { src: 'assets/img/texturas/14.png', id: 14, checked: false },
    { src: 'assets/img/texturas/15.png', id: 15, checked: false },
    { src: 'assets/img/texturas/16.png', id: 16, checked: false },
    { src: 'assets/img/texturas/17.png', id: 17, checked: false },
    { src: 'assets/img/texturas/18.png', id: 18, checked: false },
    { src: 'assets/img/texturas/19.png', id: 19, checked: false },
    { src: 'assets/img/texturas/20.png', id: 20, checked: false },
    { src: 'assets/img/texturas/21.png', id: 21, checked: false },
    { src: 'assets/img/texturas/22.png', id: 22, checked: false },
  ];

  public form = new FormGroup({
    mensajeBienvenida: new FormControl(''),
    nombreColegio: new FormControl(''),
    imagen: new FormControl(''),
    primerColorBarra: new FormControl(''),
    segundoColorBarra: new FormControl(''),
    texturaBarra: new FormControl(''),
    colorLetraNav: new FormControl(''),
    primerColorTitulos: new FormControl(''),
    colorVinculos: new FormControl(''),
  })

  public formReset = new FormGroup({
    mensajeBienvenida: new FormControl('Bienvenidos al Ciclo Escolar 2024-2025'),
    nombreColegio: new FormControl('Colegio ABC'),
    imagen: new FormControl(''),
    primerColorBarra: new FormControl('#3C6AB8'),
    segundoColorBarra: new FormControl(''),
    texturaBarra: new FormControl(''),
    colorLetraNav: new FormControl('#FFFFFF'),
    primerColorTitulos: new FormControl('#e89a20'),
    colorVinculos: new FormControl('#F4665F'),
  })

  public errorType: string = '';
  public errorSize: string = '';
  public errorPx: string = '';

  public toolTip: string = 'La imagen debe cumplir: ' + '\n' + '- Extensiones: PNG, JPG.' + '\n' +
    '- Peso máximo: 1MB.' + '\n' +
    '- Dimensiones: 800px x 600px.';

  get formData(): Personalizar {
    this.form.value.imagen = this.url;
    const data = this.form.value as Personalizar;

    return data;
  }

  get formDataReset(): Personalizar {
    const data = this.formReset.value as Personalizar;
    return data;
  }

  constructor(private _personalizarService: PersonalizarService, private _enviarInfo: EnviarInfoService) {
  }

  ngOnInit(): void {
    this._enviarInfo.currentColor.subscribe(color => {
      this.color = color;
    });
    
    this._enviarInfo.currentTextColor.subscribe(textColor => {
      this.textColor = textColor;
    });
    
    this._personalizarService.getOptions().subscribe((response: any) => {
      this.isLoading = false;
      this.data = response.personalizacion;

      // mostrar data en el formulario
      this.form.controls['mensajeBienvenida'].setValue(this.data.PERMENSAJE);
      this.form.controls['nombreColegio'].setValue(this.data.PERNOMBRE);
      // this.form.controls['imagen'].setValue(this.data.PERLOGO);
      this.form.controls['primerColorBarra'].setValue(this.data.PERPR_COL_BAR);
      this.form.controls['segundoColorBarra'].setValue(this.data.PERSDO_COL_BAR);
      this.form.controls['texturaBarra'].setValue(this.data.PERTXT_BAR);
      this.form.controls['colorLetraNav'].setValue(this.data.PERCOL_LTR_BAR);
      this.form.controls['primerColorTitulos'].setValue(this.data.PERPR_COL_TIT);
      this.form.controls['colorVinculos'].setValue(this.data.PERVINCULOS);

    });
  }

  // onSelectFile(event: any) {
  //   if (event.target.files && event.target.files[0]) {
  //     const reader = new FileReader();
  //     reader.readAsDataURL(event.target.files[0]);
  //     reader.onload = (event) => {
  //       this.url = event.target?.result;
  //     };
  //   }
  // }

  // preview de la imagen en input type file y convertirla a base64
  onFileChange(event: any) {
    const file = event.target.files[0];

    //valida la extensión del archivo
    const allowedTypes = ['image/png', 'image/jpeg'];
    if (!allowedTypes.includes(file.type)) {
      this.errorType = "Debe ser imagen. Por favor, utiliza .JPEG o .PNG.";
      return;
    } else {
      this.errorType = "";
    }

    //Validar peso de la imagen
    const allowedSize = 1 * 1024 * 1024;
    console.log(allowedSize);
    if (file.size > allowedSize) {
      this.errorSize = "El tamaño debe ser menor a 1 MB";
      return;
    } else {
      this.errorSize = "";
    }

    const reader = new FileReader()

    reader.onloadend = () => {
      const img = new Image();
      img.onload = () => {
        const maxWidth = 216; // máximo ancho en px
        const maxHeight = 70; //máxima altura en px
        if (img.width > maxWidth || img.height > maxHeight) {
          this.errorPx = `La imagen no debe ser mayor a ${maxWidth}px x ${maxHeight}px`;
          return;
        } else {
          this.errorPx = ``
        }
        this.url = reader.result;
      };

      img.src = reader.result as string;
    };

    if (file) {
      reader.readAsDataURL(file);
    }
  }

  //Seleccionar una textura y mostrarla visualmente
  toggleChecked(id: number) {
    this.img.forEach(item => {
      if (item.id === id) {
        item.checked = true;
      } else {
        item.checked = false;
      }
    });
  }

  //mostrar opciones para personalizar colores
  onOptionChangeBarra(option: string) {
    if (option === 'solido') {
      this.form.get('segundoColorBarra')?.setValue('');
      this.form.get('texturaBarra')?.setValue('');
    } else if (option === 'textura') {
      this.form.get('primerColorBarra')?.setValue('');
      this.form.get('segundoColorBarra')?.setValue('');
    }
  }

  //mostrar el gradiente en el div
  getGradientBarra(): string {
    return `linear-gradient(${this.color1}, ${this.color2})`;
  }

  //actualizar las preferencias de la página
  personalizar() {
    console.log(this.form.value);


    Swal.fire({

      icon: 'question',
      title: '¿Quieres actualizar con estas configuraciones?',
      showCancelButton: true,
      cancelButtonText: "Cancelar",
      confirmButtonColor: 'rgb(237,46,56)',
      confirmButtonText: 'Sí',
      // didOpen: () => {
      //   Swal.showLoading();
      // }
    }).then((result: any) => {
      if (result.isConfirmed) {
        this._personalizarService.personalizar(this.formData).subscribe((response) => {

          Swal.fire({
            icon: 'success',
            title: 'Personalización actualizada',
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',

          }).then((result: any) => {

            if (result.isConfirmed) {
              location.reload();
            }
          })
        }, (err) => {
          console.log(err);
          Swal.fire({
            icon: 'error',
            title: 'Error al hacer la actualización',
            text: `${err.error.message}`,
          })
        })
      }
    })

  }

  reset() {

    console.log(this.formReset.value);
    Swal.fire({
      icon: 'question',
      title: '¿Quieres volver a los valores iniciales?',
      text: 'Esta acción no podrá deshacerse',
      showCancelButton: true,
      cancelButtonText: "Cancelar",
      confirmButtonColor: 'rgb(237,46,56)',
      confirmButtonText: 'Sí',
    }).then((result: any) => {
      if (result.isConfirmed) {
        this._personalizarService.personalizar(this.formDataReset).subscribe((response) => {
          Swal.fire({
            icon: 'success',
            title: 'Personalización actualizada',
            text: 'Se han regresado a los valores por default',
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',
          }).then((result: any) => {
            if (result.isConfirmed) {
              location.reload();
            }
          })
        }, (err) => {
          console.log(err.error.message);
          Swal.fire({
            icon: 'error',
            title: 'Error al hacer la actualización',
            text: `${err.error.message}`
          })
        })
      }
    })

  }

}

