import {Component, EventEmitter, Input, Output} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {NgClass} from '@angular/common';
import {Store} from '@ngrx/store';
import {StateInterface} from './../../redux/reducers';

@Component({
  selector: 'sae-translate-texts',
  imports: [FormsModule, NgClass],
  templateUrl: './translate-texts.html',
  styleUrl: './translate-texts.scss'
})
export class TranslateTexts {
  public fromText: string = ''
  public toText: string = 'résumé ici'
  public loadingResume: boolean = false;
  public mode: string = 'demo';
  public debounceEnabled: boolean = true;
  public textFocused: boolean = false;

  public fileIsUploaded: boolean = false;
  public filePath: string = '';
  public fileWeight: string = '';
  
  // testing display of file selector
  // public fileIsUploaded: boolean = true;
  // public filePath: string = 'abcd.csv';
  // public fileWeight: string = '12 kb';

  public fromTimeout: any;
  public debounceDuration: number = 1000;
  @Input() appState: any = {};
  @Output() updateFilters: EventEmitter<any> = new EventEmitter();

  constructor(private store: Store<StateInterface>) {
    // Subscribe to the app state to get the loading state
    this.store.select(state => state.app.loading).subscribe(loading => {
      this.loadingResume = loading;
    });
    this.store.select(state => state.app).subscribe(appState => {
      this.appState = appState;
    });

  }

  onToTextChanged(e: any): void {
    console.log('text changed toText', e)
    // launch request
    // in demo mode, fill some filters
    if (this.mode !== 'production') {

      // Clear any existing timeout to reset the debounce
      if (this.fromTimeout) {
        clearTimeout(this.fromTimeout);
      }

      // Set a new timeout
      this.fromTimeout = setTimeout(() => {
        // in demo mode, load demo filters
        console.log('demo mode')

        const newFilters = [
          ['filter demo 1', 'filter demo 2'],
          ['filter demo 3'],
          ['filter demo 4', 'filter demo ABCD'],
          ['filter demo 5'],
        ]
        this.updateFilters.emit(newFilters);
        this.loadingResume = false;
      }, this.debounceDuration);
    }
  }

  onFromTextChanged(e?: any): void {

    console.log('text changed fromText', e)

    // this.store.dispatch({})
    // run research after a delay
    if (this.mode !== 'production') {
      this.loadingResume = true;

      // Clear any existing timeout to reset the debounce
      if (this.fromTimeout) {
        clearTimeout(this.fromTimeout);
      }

      // Set a new timeout
      this.fromTimeout = setTimeout(() => {
          // in demo mode, make a fake resume
          console.log('demo mode')
          this.toText = "Résumé de démo à titre d'exemple"
          this.loadingResume = false;
        },
        this.debounceDuration);

    }

  }

  emptyText(someText: 'fromText' | 'toText') {
    this[someText] = '';
  }

  onFileSelected($event: any) {
    console.log('file selected', $event, $event.target.value)
    if ($event.target.value) {
      this.fileIsUploaded = true;
      this.filePath = $event.target.value;
      this.fileWeight = $event.target.value;
    }
  }

  onRemoveFileSelected() {
    this.fileIsUploaded = false;
    this.filePath = '';
    this.fileWeight = '';

    // document.getElementById('fromText')?.focus();
  }

  clickFileUpload(fileUpload: HTMLInputElement) {
    fileUpload.click();
    console.log('click file upload', fileUpload)
  }

  focusFromText(e?: any) {
    console.log('focus from text', e)
    console.log('focus from text')
    this.onRemoveFileSelected()
    // this.fromText = ' '
    this.textFocused = true
  }
}