import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import {
  F_CONNECTION_BUILDERS,
  FCanvasComponent,
  FFlowModule,
  IFConnectionBuilder,
  IFConnectionBuilderRequest,
  IFConnectionBuilderResponse
} from '@foblex/flow';
import { IPoint, PointExtensions } from '@foblex/2d';

class OffsetStraightBuilder implements IFConnectionBuilder {

  public handle(request: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
    const { source, target } = request;
    const path = `M ${ source.x } ${ source.y } L ${ source.x + 20 } ${ source.y } L ${ target.x - 20 } ${ target.y } L ${ target.x } ${ target.y }`;

    return { path, connectionCenter: { x: 0, y: 0 }, penultimatePoint: PointExtensions.initialize(target.x - 20, target.y) };
  }
}

class CircleConnectionBuilder implements IFConnectionBuilder {

  public handle(request: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
    const { source, target } = request;
    const d = this.getD(request);
    const path = `M ${ source.x } ${ source.y } S${ d.x } ${ d.y } ${ target.x } ${ target.y }`;
    return { path, connectionCenter: { x: 0, y: 0 }, penultimatePoint: d };
  }

  private getD(request: IFConnectionBuilderRequest): IPoint {
    const offset: number = request.offset;
    const cx: number = (request.source.x + request.radius + request.target.x) / 2;
    const cy: number = (request.source.y + request.radius + request.target.y) / 2;
    const dx: number = cx + (offset * (request.source.y - request.target.y)) / Math.sqrt(Math.pow(request.source.x - request.target.x, 2) + Math.pow(request.source.y - request.target.y, 2)) || cx;
    const dy: number = cy - (offset * (request.source.x - request.target.x)) / Math.sqrt(Math.pow(request.source.x - request.target.x, 2) + Math.pow(request.source.y - request.target.y, 2)) || cy;

    return { x: dx, y: dy };
  }
}

const connectionBuilders = {
  [ 'offset_straight' ]: new OffsetStraightBuilder(),
  [ 'circle' ]: new CircleConnectionBuilder()
};

@Component({
  selector: 'custom-connection-type',
  styleUrls: [ './custom-connection-type.component.scss' ],
  templateUrl: './custom-connection-type.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  providers: [
    { provide: F_CONNECTION_BUILDERS, useValue: connectionBuilders }
  ],
  imports: [
    FFlowModule
  ]
})
export class CustomConnectionTypeComponent {

  @ViewChild(FCanvasComponent, { static: true })
  public fCanvas!: FCanvasComponent;

  public onLoaded(): void {
    this.fCanvas.resetScaleAndCenter(false);
  }
}