import {Component} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {Store} from '@ngrx/store';
import {ApiService} from '../../services/api-service';
import {ActionTypes, StateInterface} from '../../reducers';

@Component({
  selector: 'app-feedback-button',
  imports: [CommonModule, FormsModule],
  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;

  constructor(
    private store: Store<StateInterface>,
    private apiService: ApiService
  ) {
  }

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