import { CommonModule, Location } from '@angular/common';
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTabsModule } from '@angular/material/tabs';
import { debounceTime, map, Observable, Subscription } from 'rxjs';
import { Publication } from '../../core/rest-services/publications/model/publication';
import { PublicationEditionService } from './publication-edition.service';
import {MatDialogModule} from '@angular/material/dialog'; 
import { PictureSelectionDialog } from './picture-selection-dialog/picture-selection-dialog.component';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SubmitButtonComponent } from '../../components/submit-button/submit-button.component';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-publication-edition',
  standalone: true,
  imports: [
    CommonModule,
    MatDialogModule,
    MatIconModule,
    MatInputModule,
    MatProgressSpinnerModule,
    MatTabsModule,
    MatTooltipModule,
    PictureSelectionDialog,
    ReactiveFormsModule,
    SubmitButtonComponent
  ],
  templateUrl: './publication-edition.component.html',
  styleUrl: './publication-edition.component.scss',
  providers: [PublicationEditionService]
})
export class PublicationEditionComponent implements OnInit, OnDestroy {
  private formBuilder = inject(FormBuilder);
  private location = inject(Location);
  private publicationEditionService = inject(PublicationEditionService);

  private subscriptions: Subscription[] = [];
  publication!: Publication;
  publicationEditionForm: FormGroup = this.formBuilder.group({
    title: new FormControl<string | undefined>('', [Validators.required]),
    description: new FormControl<string | undefined>('', [Validators.required]),
    text: new FormControl<string | undefined>('', [Validators.required]),
    illustrationId: new FormControl<string | undefined>('', [Validators.required]),
    categoryId: new FormControl<string | undefined>('', [Validators.required])
  });

  get isLoading$(): Observable<boolean> {
    return this.publicationEditionService.isLoading$;
  }

  get isSaving$(): Observable<boolean> {
    return this.publicationEditionService.isSaving$;
  }

  ngOnInit(): void {
    ['title', 'description', 'text'].forEach(fieldName => {
      const fieldSubscription = this.publicationEditionForm.controls[fieldName].valueChanges
        .pipe(
          map(value => value?.length ? value as string : '')
        )
        .subscribe(fieldValue => {
          switch (fieldName) {
            case 'title':
              this.publicationEditionService.editTitle(fieldValue);
              break;
            case 'description':
              this.publicationEditionService.editDescription(fieldValue);
              break;
            case 'text':
              this.publicationEditionService.editText(fieldValue);
              break;
            default:
              break;
          }
        });
      this.subscriptions.push(fieldSubscription);
    });

    const publicationSubscription = this.publicationEditionService.state$.subscribe(state => {
      this.publication = state.publication;
      this.publicationEditionForm.controls['title'].setValue(this.publication.title, { emitEvent: false });
      this.publicationEditionForm.controls['description'].setValue(this.publication.description, { emitEvent: false });
      this.publicationEditionForm.controls['text'].setValue(this.publication.text, { emitEvent: false });
      this.publicationEditionForm.controls['illustrationId'].setValue(this.publication.illustrationId, { emitEvent: false });
      this.publicationEditionForm.controls['categoryId'].setValue(this.publication.categoryId, { emitEvent: false });
    });
    this.subscriptions.push(publicationSubscription);

    this.publicationEditionService.loadPublication();
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(subscription => subscription?.unsubscribe());
  }

  goPreviousLocation(): void {
    this.location.back();
  }

  insertTitle(titleNumber: number): void {
    this.publicationEditionService.insertTitle(titleNumber);
  }

  selectAPicture(): void {
    this.publicationEditionService.selectAPicture();
  }

  insertLink(): void {
    this.publicationEditionService.insertLink();
  }

  displayCodeBlockDialog(): void {
    this.publicationEditionService.displayCodeBlockDialog();
  }

  save(): void {
    this.publicationEditionService.save();
  }

  displayPictureSectionDialog(): void {
    this.publicationEditionService.displayPictureSectionDialog();
  }

  updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
    if (event.target) {
      const textarea = event.target as HTMLTextAreaElement;

      const positionStart = textarea.selectionStart;
      const positionEnd = textarea.selectionEnd;
      
      const selectedCharacterCount = positionEnd - positionStart;
      console.log(`cursor position updated: [${positionStart}, ${positionEnd}] (${selectedCharacterCount})`);
      this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
    }

  }
}