import { Directive, ElementRef, inject, Input } from "@angular/core";
import { Draggable, DragOptions } from '@neodrag/vanilla';

@Directive({
    standalone: true,
    selector: "[draggable]"
})
export class DraggableDirective {
    #elementRef = inject(ElementRef);
    #dragInstance: Draggable | null = null;

    @Input('draggable') set dragOptions(dragOptions: DragOptions | undefined | null | "") {
        let options = dragOptions || {};
        
        if (this.#dragInstance) {
            this.#dragInstance.updateOptions(options);
        } else { // create new instance
            this.#dragInstance = new Draggable(this.#elementRef.nativeElement, options);
        }
    }
    
    ngOnDestroy() {
        this.#dragInstance?.destroy();
        this.#dragInstance = null;
    }
}

@Component({
  selector: 'app-root',
  template: `
    <div draggable style="width: 100px">
      Drag me!
    </div>

    <!-- With options -->
    <div [draggable]="dragOptions" style="width: 100px">
      Drag me!
    </div>
  `
})
export class AppComponent {
  dragOptions: DragOptions = {
    axis: 'y',
    onDrag: (event) => {
      console.log(event);
    }
  }
}