import {Component, Input, OnInit, HostListener} from '@angular/core';
import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
import {JsonPipe, NgIf} from "@angular/common";
import {FormsService} from "../_services/forms.service";
import { ImgInputComponent } from './img-input/img-input.component';
import {updateCacheConfig} from "@angular/cli/src/commands/cache/utilities";

@Component({
  selector: 'qr-code',
  standalone: true,
  imports: [
    FormsModule,
    NgIf,
    ReactiveFormsModule,
    JsonPipe,
    ImgInputComponent
  ],
  templateUrl: './qr-code.component.html',
  styleUrl: './qr-code.component.scss'
})
export class QrCodeComponent implements OnInit{

  @Input()
  public QrCodeForm: FormGroup;
  public dragOver = false;

  public upload: any = {file: null, progress: 0};

  constructor(private formBuilder:FormBuilder, private formsService: FormsService){}

  ngOnInit() {
    this.QrCodeForm = this.formBuilder.group({
      'text' : [''],
      'format' : ['png'],
      'size' : [350],
      'foreground-color' : ['#000000'],
      'background-color' : ['#ffffff'],
      'gradient-start' : ['#ffffff'],
      'gradient-end' : ['#00A0FF'],
      'gradient-type' : ['vertical'],
      'color-type' : ['solid'],
      'custom-eye-color' : [false],
      'outside-eye-color' : ['#000000'],
      'inner-eye-color' : ['#000000'],
      logo_image : [],
      data_image : [],
      'bit-type' : ['square']
    });
  }


  onSubmit(){
    console.log(this.QrCodeForm.controls['data_image'].value)
    this.QrCodeForm.markAllAsTouched();
    if (this.QrCodeForm.valid)
      this.formsService.save('model', 'QrCode', null, this.QrCodeForm.value).subscribe(res => {
      }, error => {
        console.log(error);
      });
  }



  get colorType(){
    return this.QrCodeForm.value['color-type']
  }

  get EyeType(){
    return this.QrCodeForm.value['custom-eye-color']
  }

  setDataImgFile(value){
    console.log(value)
    if (value != null)
      this.QrCodeForm.patchValue({data_image : value.id})
    else
      this.QrCodeForm.patchValue({data_image : null})

  }
  setLogoFile(value){
    console.log(value)
    if (value != null)
      this.QrCodeForm.patchValue({logo_image : value.id})
    else
      this.QrCodeForm.patchValue({logo_image : null})
  }


}