// eslint-disable-next-line max-classes-per-file
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,
      penultimatePoint: PointExtensions.initialize(target.x - 20, target.y),
      secondPoint: PointExtensions.initialize(source.x + 20, source.y),
      points: [
        source,
        PointExtensions.initialize(source.x + 20, source.y),
        PointExtensions.initialize(target.x - 20, target.y),
        target,
      ],
      candidates: [],
    };
  }
}

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,
      penultimatePoint: d,
      secondPoint: d,
      points: [source, d, target],
      candidates: [],
    };
  }

  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);
  }
}