import { Component, OnInit } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { ThemeService } from '../../services/theme.service';
import { NgClass } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import {Work} from "../../models/work.model";
import {WorkService} from "../../services/work.service";
import {NgForOf} from "@angular/common";
import {FormsModule, NgForm} from "@angular/forms";

@Component({
  selector: 'app-work',
  templateUrl: './work.component.html',
  styleUrl: './work.component.scss',
  standalone: true,
  imports: [NgClass, 
    TranslateModule, 
    RouterLink,
    NgForOf,
    FormsModule
  ],
})

export class WorkComponent implements OnInit {
  // à retirer quand les boutons seront dans editor.component
  isLoaded: boolean = false; // Pour vérifier si le chargement est terminé

  themeClass!: string;
  works: Work[] = [];

  constructor(
    private router: Router,
    private themeService: ThemeService,
    protected workService: WorkService
  ) {}

  ngOnInit() {
    this.themeService.isDarkTheme.subscribe((value) => {
      value
        ? (this.themeClass = 'dark-theme')
        : (this.themeClass = 'light-theme');
    });
    this.workService.getWorks().subscribe((response: Work[]) => this.works = response);
  }


  // Si click sur "Work", on redirige vers la page des travaux
  onContinue(): void {
    this.router.navigateByUrl('/work');
  }


  onSubmit(form: NgForm) {
      this.workService.postWork(form);
  }
}