import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MainButton} from '../main-button/main-button';
import {NgClass} from '@angular/common';

@Component({
  selector: 'sae-feedback-button',
  imports: [
    FormsModule,
    MainButton,
    NgClass
  ],
  templateUrl: './feedback-button.html',
  styleUrl: './feedback-button.scss'
})

export class FeedbackButton {
  isModalOpen: boolean = false;
  // isModalOpen: boolean = true;
  feedbackText: string = '';
  isSubmitting: boolean = false;
  submitSuccess: boolean = false;
  submitError: boolean = false;
  protected readonly close = close;

  toggleModal() {
    this.isModalOpen = !this.isModalOpen;

    // Reset state when opening modal
    if (this.isModalOpen) {
      this.feedbackText = '';
      this.submitSuccess = false;
      this.submitError = false;
    }

  }

  async submitFeedback() {
    if (!this.feedbackText.trim()) {
      return; // Don't submit empty feedback
    }

    this.isSubmitting = true;
    this.submitSuccess = false;
    this.submitError = false;

    try {

      this.submitSuccess = true;

      // Close modal after a short delay
      setTimeout(() => {
        this.toggleModal();
      }, 2000);
    } catch (error) {
      console.error('Error submitting feedback:', error);
      this.submitError = true;
    } finally {
      this.isSubmitting = false;
    }
  }
}