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

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

export class FeedbackButton {
  isModalOpen: boolean = false;
  feedbackText: string = '';
  isSubmitting: boolean = false;
  submitSuccess: boolean = false;
  submitError: boolean = false;


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

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

    // Update app state to show/hide feedback panel
    // this.store.dispatch({
    //   type: ActionTypes.UPDATE_APP,
    //   payload: {
    //     displayFeedBackPanel: this.isModalOpen,
    //     feedBackInput: this.feedbackText
    //   }
    // });
  }

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

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

    try {
      // Update Redux state with feedback text
      // this.store.dispatch({
      //   type: ActionTypes.UPDATE_APP,
      //   payload: {
      //     feedBackInput: this.feedbackText
      //   }
      // });
      //
      // // Dispatch action to send feedback
      // this.store.dispatch({
      //   type: ActionTypes.SEND_USER_FEEDBACK,
      //   payload: {
      //     feedback: this.feedbackText
      //   }
      // });
      //
      // // Call API service directly
      // await this.apiService.sendUserFeedback(this.feedbackText);

      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;
    }
  }
}
