import {
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  inject,
  Injectable,
  Injector,
  OnInit,
  signal,
  untracked,
  viewChild,
} from '@angular/core';
import {
  EFMarkerType,
  FCanvasChangeEvent,
  FCanvasComponent,
  FCreateConnectionEvent,
  FFlowComponent,
  FFlowModule,
  FMoveNodesEvent,
  FReassignConnectionEvent,
  FSelectionChangeEvent,
} from '@foblex/flow';
import { IPoint } from '@foblex/2d';
import { Mutator } from '@foblex/mutator';
import { generateGuid } from '@foblex/utils';

interface INode {
  id: string;
  position: IPoint;
  text: string;
}

interface IConnection {
  id: string;
  source: string;
  target: string;
}

interface IState {
  nodes: Record<string, INode>;
  connections: Record<string, IConnection>;
  selection?: {
    nodes: string[];
    connections: string[];
  };
  transform?: {
    position: IPoint;
    scale: number;
  };
}

@Injectable()
class FlowState extends Mutator<IState> {}

const DEFAULT_STATE: IState = {
  nodes: {
    ['node1']: {
      id: 'node1',
      position: { x: 0, y: 200 },
      text: 'Node 1',
    },
    ['node2']: {
      id: 'node2',
      position: { x: 200, y: 200 },
      text: 'Node 2',
    },
  },
  connections: {
    ['connection1']: {
      id: 'connection1',
      source: 'node1-output-0',
      target: 'node2-input-1',
    },
  },
  transform: {
    position: { x: 0, y: 0 },
    scale: 1,
  },
};

@Component({
  selector: 'undo-redo-v2',
  styleUrls: ['./undo-redo-v2.scss'],
  templateUrl: './undo-redo-v2.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  providers: [FlowState],
  imports: [FFlowModule],
})
export class UndoRedoV2 implements OnInit {
  protected readonly state = inject(FlowState);
  private readonly _injector = inject(Injector);

  private readonly _flow = viewChild(FFlowComponent);
  private readonly _canvas = viewChild.required(FCanvasComponent);

  protected readonly eMarkerType = EFMarkerType;

  private _isChangeAfterLoadedResetAndCenter = true;

  // Debounce time for canvas change events. It helps to prevent excessive updates when zooming;
  protected fCanvasChangeEventDebounce = 200; // milliseconds

  protected readonly viewModel = signal<IState | undefined>(undefined);

  protected readonly nodes = computed(() => {
    return Object.values(this.viewModel()?.nodes || {});
  });

  protected readonly connections = computed(() => {
    return Object.values(this.viewModel()?.connections || {});
  });

  public ngOnInit(): void {
    this.state.initialize(DEFAULT_STATE);
    this._listenStateChanges();
  }

  private _listenStateChanges(): void {
    effect(
      () => {
        this.state.changes();
        untracked(() => this._applyChanges());
      },
      { injector: this._injector },
    );
  }

  private _applyChanges(): void {
    this.viewModel.set(this.state.getSnapshot());
    if (!this.viewModel()) {
      return;
    }
    this._reCenterCanvasIfUndedToFirstStep();
    this._applySelectionChanges(this.viewModel()!);
  }

  private _reCenterCanvasIfUndedToFirstStep(): void {
    if (!this.state.canUndo() && !this._isChangeAfterLoadedResetAndCenter) {
      this.editorLoaded();
    }
  }

  private _applySelectionChanges({ selection }: IState): void {
    this._flow()?.select(selection?.nodes || [], selection?.connections || [], false);
  }

  protected editorLoaded(): void {
    this._isChangeAfterLoadedResetAndCenter = true;
    this._canvas()?.resetScaleAndCenter(false);
  }

  protected changeCanvasTransform(event: FCanvasChangeEvent): void {
    this._ifCanvasChangedFromInitialReCenterUpdateInitialState(event);
  }

  private _ifCanvasChangedFromInitialReCenterUpdateInitialState(event: FCanvasChangeEvent): void {
    if (this._isChangeAfterLoadedResetAndCenter) {
      this._isChangeAfterLoadedResetAndCenter = false;
      this.state.patchBase({ transform: { ...event } });

      return;
    }
    this.state.update({
      transform: createTransformObject(event),
    });
  }

  protected createConnection(event: FCreateConnectionEvent): void {
    if (event.fInputId) {
      const connection = createConnectionObject(event);
      this.state.create({
        connections: {
          [connection.id]: connection,
        },
      });
    }
  }

  protected reassignConnection(event: FReassignConnectionEvent): void {
    if (event.newTargetId) {
      this.state.update({
        connections: {
          [event.connectionId]: { target: event.newTargetId },
        },
      });
    }
  }

  protected moveNodes(event: FMoveNodesEvent): void {
    this.state.update({
      nodes: createMoveNodesChangeObject(event.fNodes),
    });
  }

  protected changeSelection(event: FSelectionChangeEvent): void {
    this.state.update({
      selection: {
        nodes: [...event.fNodeIds],
        connections: [...event.fConnectionIds],
      },
    });
  }
}

function createTransformObject({ position, scale }: FCanvasChangeEvent) {
  return { position, scale };
}

function createConnectionObject({ fOutputId, fInputId }: FCreateConnectionEvent) {
  return {
    id: generateGuid(),
    source: fOutputId,
    target: fInputId!,
  };
}

function createMoveNodesChangeObject(nodes: { id: string; position: IPoint }[]) {
  return Object.fromEntries(nodes.map(({ id, position }) => [id, { position }]));
}