import { Component, effect, inject, Input, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { UntilDestroy } from '@ngneat/until-destroy';
import { MyProfileUpdateCvFormComponent } from '@app/shared/components/my-profile-update-cv-form/my-profile-update-cv-form.component';
import { ProfileViewModel } from '@app/adapters/profiles/profile.presenter.model';
import { ProfileFacade } from '@app/adapters/profiles/profile.facade';
import { ActionType } from '@app/domain/action-type.util';
import { Profile } from '@app/domain/profiles/profile.model';
import { SectorFacade } from '@app/adapters/sectors/sector.facade';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import { LoadingComponent } from '@app/shared/components/loading/loading.component';

@Component({
  selector: 'app-my-profile-update-form',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MyProfileUpdateCvFormComponent,
    NgTemplateOutlet,
    LoadingComponent,
    NgClass,
  ],
  templateUrl: './my-profile-update-form.component.html',
  styleUrl: './my-profile-update-form.component.scss',
})
@UntilDestroy()
export class MyProfileUpdateFormComponent implements OnInit {
  protected readonly ActionType = ActionType;

  @Input({ required: true }) profile: ProfileViewModel = {} as ProfileViewModel;
  private readonly formBuilder = inject(FormBuilder);
  profileForm!: FormGroup;

  private readonly profileFacade = new ProfileFacade();
  protected readonly loading = this.profileFacade.loading;
  protected readonly error = this.profileFacade.error;

  private readonly sectorFacade = new SectorFacade();
  protected sectors = this.sectorFacade.sectors;
  protected sector = this.sectorFacade.sector;
  protected readonly sectorLoading = this.sectorFacade.loading;
  protected readonly sectorError = this.sectorFacade.error;

  constructor() {
    effect(() => {
      if (!this.loading().isLoading) {
        switch (this.loading().action) {
          case ActionType.UPDATE:
            break;
        }
      }
      if (!this.sectorLoading().isLoading) {
        switch (this.sectorLoading().action) {
          case ActionType.READ:
            if (!this.sectorLoading() && !this.sectorError().hasError) {
              this.profileForm.get('secteur')!.setValue(this.sector().id);
            }
        }
      }
    });
  }

  ngOnInit(): void {
    this.profileForm = this.formBuilder.group({
      profession: new FormControl(
        this.profile.profession ? this.profile.profession.toLowerCase() : '',
        [Validators.required]
      ),
      secteur: new FormControl<string | null>(
        this.profile.secteur ? this.profile.secteur.toLowerCase() : null,
        [Validators.required]
      ),
      bio: new FormControl(this.profile.bio ? this.profile.bio.toLowerCase() : ''),
      apropos: new FormControl(this.profile.apropos ? this.profile.apropos.toLowerCase() : ''),
      reseaux: new FormGroup({
        facebook: new FormControl(
          this.profile.reseaux ? (this.profile.reseaux as any)['facebook'] : ''
        ),
        github: new FormControl(
          this.profile.reseaux ? (this.profile.reseaux as any)['github'] : ''
        ),
        instagram: new FormControl(
          this.profile.reseaux ? (this.profile.reseaux as any)['instagram'] : ''
        ),
        linkedIn: new FormControl(
          this.profile.reseaux ? (this.profile.reseaux as any)['linkedIn'] : ''
        ),
        web: new FormControl(this.profile.reseaux ? (this.profile.reseaux as any)['web'] : ''),
        x: new FormControl(this.profile.reseaux ? (this.profile.reseaux as any)['x'] : ''),
        youTube: new FormControl(
          this.profile.reseaux ? (this.profile.reseaux as any)['youTube'] : ''
        ),
      }),
    });

    if (this.profile.secteur) {
      this.sectorFacade.loadOne(this.profile.secteur);
    }

    this.sectorFacade.load();
  }

  onSubmit() {
    if (this.profileForm.invalid) {
      return;
    }

    const data: Profile = {
      profession: this.profileForm.getRawValue().profession,
      secteur: this.profileForm.getRawValue().secteur,
      apropos: this.profileForm.getRawValue().apropos,
      bio: this.profileForm.getRawValue().bio,
      reseaux: this.profileForm.getRawValue().reseaux,
    } as Profile;

    this.profileFacade.update(this.profile.id, data);
  }
}
