import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {AppealsService, MinecraftAppeal} from '@api';
import {HeaderComponent} from '@header/header.component';

@Component({
  selector: 'app-appeal',
  imports: [
    HeaderComponent
  ],
  templateUrl: './appeal.component.html',
  styleUrl: './appeal.component.scss'
})
export class AppealComponent implements OnInit, AfterViewInit {

  public form: FormGroup<Appeal>;
  private resizeObserver: ResizeObserver | null = null;
  private boundHandleResize: any;

  constructor(
    private appealApi: AppealsService,
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {
    this.form = new FormGroup({
      username: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
      punishmentId: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
      email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
      appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
    });
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.setupResizeObserver();
    this.updateContainerHeight();

    this.boundHandleResize = this.handleResize.bind(this);
    window.addEventListener('resize', this.boundHandleResize);

    setTimeout(() => this.updateContainerHeight(), 0);
  }

  ngOnDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }

    if (this.boundHandleResize) {
      window.removeEventListener('resize', this.boundHandleResize);
    }
  }

  private handleResize() {
    this.updateContainerHeight();
  }

  private setupResizeObserver() {
    this.resizeObserver = new ResizeObserver(() => {
      this.updateContainerHeight();
    });

    const headerElement = document.querySelector('app-header');
    if (headerElement) {
      this.resizeObserver.observe(headerElement);
    }

    const footerElement = document.querySelector('footer');
    if (footerElement) {
      this.resizeObserver.observe(footerElement);
    }
  }

  private updateContainerHeight() {
    const headerElement = document.querySelector('app-header');
    const footerElement = document.querySelector('footer');

    const container = this.elementRef.nativeElement.querySelector('.appeal-container');

    if (headerElement && footerElement && container) {
      const headerHeight = headerElement.getBoundingClientRect().height;
      const footerHeight = footerElement.getBoundingClientRect().height;

      const calculatedHeight = `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
      this.renderer.setStyle(container, 'min-height', calculatedHeight);
    }
  }

  public onSubmit() {
    if (this.form === undefined) {
      console.error('Form is undefined');
      return
    }
    if (this.form.valid) {
      this.sendForm()
    } else {
      Object.keys(this.form.controls).forEach(field => {
        const control = this.form!.get(field);
        if (!(control instanceof FormGroup)) {
          console.error('Control [' + control + '] is not a FormGroup');
          return;
        }
        control.markAsTouched({onlySelf: true});
      });
    }
  }

  private sendForm() {
    const rawValue = this.form.getRawValue();
    const appeal: MinecraftAppeal = {
      appeal: rawValue.appeal,
      email: rawValue.email,
      punishmentId: parseInt(rawValue.punishmentId),
      username: rawValue.username,
      uuid: ''//TODO
    }
    this.appealApi.submitMinecraftAppeal(appeal).subscribe()
  }

}

interface Appeal {
  username: FormControl<string>;
  punishmentId: FormControl<string>;
  email: FormControl<string>;
  appeal: FormControl<string>;
}