import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { NgxMoveableComponent, OnDragEnd, OnResize, OnResizeEnd } from 'ngx-moveable';
import { OnDrag } from 'ngx-moveable';
import { ConfigService } from '../services/config.service';
import { Rect } from '../models/generated/Rect';
import { Color } from '../color-picker/color-picker.component';
import { ShortcutService } from '../services/shortcut.service';
import { CarouselComponent } from '../carousel/carousel.component';
import { PlanService } from '../services/plan.service';
import { Plan, PlanElement } from '../models/plan';
import { WorldAreaService } from '../services/world-area.service';
import { WorldArea } from '../models/world-area';
import { NotesComponent } from '../editor/notes/notes.component';
import { ResizedEvent } from 'angular-resize-event';

@Component({
  selector: 'plan-display',
  templateUrl: './plan-display.component.html',
  styleUrls: ['./plan-display.component.scss']
})
export class PlanDisplayComponent implements AfterViewInit, OnInit {
  @Input() backgroundColor?: Color;
  draggable: boolean = true;
  rect?: Rect;

  // slides: PlanElement[] = [];
  plan?: Plan;
  slideIndex: number = 0;
  zoneSlides?: CarouselComponent<PlanElement>;
  currentSlides?: CarouselComponent<PlanElement>;
  worldAreaMap?: Map<String, WorldArea>;


  constructor(private configService: ConfigService, private cdr: ChangeDetectorRef, private shortcut: ShortcutService, private planService: PlanService, public worldAreaService: WorldAreaService) {
    // for (let i = 0; i < 100; i++) {
    //   this.slides.push(i);
    // }
  }

  ngOnInit() {
    this.plan = this.planService.currentPlan;
    this.worldAreaService.getWorldAreas().subscribe(a => this.worldAreaMap = a);
  }

  abs(v: number) {
    return Math.abs(v);
  }

  transform() {
    return `translate(${this.rect!.x}px, ${this.rect!.y}px)`;
  }

  width() {
    return `${this.rect!.width}px`;
  }

  height() {
    return `${this.rect!.height}px`;
  }

  ngAfterViewInit(): void {
    const cfgRect = this.configService.config.initialPlanWindowPosition;
    this.rect = {
      x: cfgRect.x * window.innerWidth,
      y: cfgRect.y * window.innerHeight,
      width: cfgRect.width * window.innerWidth,
      height: cfgRect.height * window.innerHeight,
    }

    setTimeout(() => this.cdr.detectChanges(), 0);
  }

  onDrag(e: OnDrag) {
    this.rect!.x = e.translate[0];
    this.rect!.y = e.translate[1];
  }

  onDragEnd(e: OnDragEnd) {
    this.saveRect();
  }

  onResize(e: OnResize) {
    this.rect!.width = e.width;
    this.rect!.height = e.height;
    this.onDrag(e.drag);
  }

  onResizeEnd(e: OnResizeEnd) {
    this.saveRect();
  }

  saveRect() {
    const toCfgRect = this.rect!;
    this.configService.config.initialPlanWindowPosition = {
      x: toCfgRect.x / window.innerWidth,
      y: toCfgRect.y / window.innerHeight,
      width: toCfgRect.width / window.innerWidth,
      height: toCfgRect.height / window.innerHeight,
    }
  }

  registerZoneSlides(carousel: CarouselComponent<PlanElement>) {
    this.zoneSlides = carousel;
    console.log("zone slides");
  }
  registerCurrentSlides(carousel: CarouselComponent<PlanElement>) {
    this.currentSlides = carousel;

    if (this.currentSlides) {
      this.shortcut.register("F7", this.prev.bind(this));
      this.shortcut.register("F8", this.next.bind(this));
    }
  }

  next() {
    this.currentSlides?.next();
    this.zoneSlides?.next();
  }

  prev() {
    this.currentSlides?.prev();
    this.zoneSlides?.prev();
  }

  onResizeNote(noteSlide: NotesComponent) {
    if (!noteSlide.ref) { return; }

    let bounds = noteSlide.ref.nativeElement.getBoundingClientRect();
    const children = noteSlide.ref.nativeElement.children;
    
    let sumWidth = 0;
    let sumHeight = 0;
    for (let child of children) {
      const c = child.getBoundingClientRect();
      sumWidth += c.width;
      sumHeight += c.height;
    }

    const scale = Math.min(
      sumWidth / bounds.width,
      sumHeight / bounds.height,
    )

    noteSlide.ref.nativeElement.style.transform = `scale(1, ${scale})`;
  }
}