import {
  Component,
  AfterViewInit,
  ViewChild,
  ElementRef,
  ChangeDetectorRef,
  CUSTOM_ELEMENTS_SCHEMA,
  EventEmitter,
  Output
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import '../../../../../assets/scripts/model-viewer';

@Component({
  selector: 'app-text-legibility-assessment',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './text-legibility-assessment.component.html',
  styleUrls: ['./text-legibility-assessment.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TextLegibilityAssessmentComponent implements AfterViewInit {
  @ViewChild('modelViewer') modelViewerRef!: ElementRef<any>;
  @Output() testComplete = new EventEmitter<void>();
  @Output() redoTest   = new EventEmitter<number>();

  minSize = 2;
  maxSize = 64;
  currentSize = 16;
  comfortableSize = 16;

  phase:
    | 'min'
    | 'confirmedMin'
    | 'max'
    | 'confirmedMax'
    | 'comfortable'
    | 'confirmedComfort'
    | 'finished' = 'min';

  private offsetApplied = false;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    const mv = this.modelViewerRef.nativeElement;
    mv.setAttribute('scale', '0.25 0.25 0.25');

    mv.addEventListener('ar-status', async (e: any) => {
      if (e.detail.status === 'session-started' && !this.offsetApplied) {
        await mv.updateComplete;
        const anchor = mv.getAnchor();
        if (!anchor.includes('not placed')) {
          const [x, y, z] = anchor.split(' ').map(parseFloat);
          mv.setAttribute('ar-anchor', `${x} ${y + 3.0} ${z}`);
          this.offsetApplied = true;
        }
      }
    });
  }

  decrease() {
    if (this.currentSize > this.minSize) {
      this.currentSize--;
      this.syncComfortable();
    }
  }

  increase() {
    if (this.currentSize < this.maxSize) {
      this.currentSize++;
      this.syncComfortable();
    }
  }

  private syncComfortable() {
    if (this.phase === 'comfortable') {
      this.comfortableSize = this.currentSize;
    }
  }

  nextPhase() {
    switch (this.phase) {
      case 'min':
        this.phase = 'confirmedMin';
        break;
      case 'confirmedMin':
        this.phase = 'max';
        this.currentSize = this.maxSize;
        break;
      case 'max':
        this.phase = 'confirmedMax';
        break;
      case 'confirmedMax':
        this.phase = 'comfortable';
        this.currentSize = Math.floor((this.minSize + this.maxSize) / 2);
        this.comfortableSize = this.currentSize;
        break;
      case 'comfortable':
        this.phase = 'confirmedComfort';
        this.comfortableSize = this.currentSize;
        break;
      case 'confirmedComfort':
        this.phase = 'finished';
        this.testComplete.emit();
        break;
    }
  }

  resetToMid() {
    this.currentSize = Math.floor((this.minSize + this.maxSize) / 2);
    this.phase = 'min';
  }

  retry() {
    this.redoTest.emit(1);
  }

  finishAssessment() {
    this.testComplete.emit();
  }
}