import { Component } from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {SettingInfo} from "../../interfaces/setting.interface";

@Component({
  selector: 'app-setting-form',
    imports: [
        FormsModule,
        NzColDirective,
        NzFormControlComponent,
        NzFormDirective,
        NzFormItemComponent,
        NzFormLabelComponent,
        NzInputDirective,
        ReactiveFormsModule
    ],
  templateUrl: './setting-form.html',
  styleUrl: './setting-form.css',
})
export class SettingForm {
    settingForm: FormGroup = new FormGroup({
        logo: new FormControl<string>(null),
        signature: new FormControl<string>(null)
    })

    submitForm() {
        // Pour annuler si le formulaire est invalide
        if (this.settingForm.invalid) return;

        // Pour obtenir la valeur du formulaire
        console.log(this.settingForm.getRawValue())

        // Pour vider le formulaire
        this.settingForm.reset()
    }

    setting: SettingInfo = {
        logo: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png',
        signature: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png'
    }
}