interface Point {
  x: number;
  y: number;
}

interface Line {
  id: number;
  coordinates: [Point, Point];
}

class Renderer {
  /**
   * @param canvasElement
   */
  constructor(canvasElement: HTMLCanvasElement): void;

  /**
   * 여러 개의 LineShape을 추가합니다.
   *
   * @param shapes 추가할 shape의 배열입니다.
   * @param options skipFireEvent가 true일 경우 renderable:added 이벤트를 발생시키지 않습니다.
   */
  public add(shapes: LineShape[], options?: { skipFireEvent?: boolean }): void;

  /**
   * 여러 개의 LineShape을 제거합니다.
   *
   * @param shapes 제거할 shape의 배열입니다.
   * @param options skipFireEvent가 true일 경우 renderable:removed 이벤트를 발생시키지 않습니다.
   */
  public remove(
    shapes: LineShape[],
    options?: { skipFireEvent?: boolean }
  ): void;

  /**
   * 렌더링된 모든 shape을 반환합니다.
   */
  public getShapes<T extends LineShape = LineShape>(): T[];

  /**
   * 선택된 shape을 반환합니다.
   *
   * @returns 현재 활성화된 LineShape 객체를 반환하거나, 없는 경우 null을 반환합니다.
   */
  public getActiveShape<T extends LineShape = LineShape>(): T | null;

  /**
   * 이벤트 리스너를 추가합니다.
   * @param type "renderable:added" | "renderable:removed" | "modified" | "modifying" | "selection:updated
   * @param listener `RendererEventListener<type>` 타입의 함수입니다.
   */
  public addListener<T extends keyof EventRecord>(
    type: T,
    listener: (e: EventRecord[T]) => void
  ): void;

  /**
   * 이벤트 리스너를 제거합니다.
   * @param type "renderable:added" | "renderable:removed" | "modified" | "modifying" | "selection:updated
   * @param listener `RendererEventListener<type>` 타입의 함수입니다.
   */
  public removeListener<T extends keyof EventRecord>(
    type: T,
    listener: (e: EventRecord[T]) => void
  ): void;
}

/**
 * 추가 / 수정 / 삭제 이벤트입니다.
 *
 * `target`은 이벤트를 발생시킨 대상으로 추가 / 수정 / 삭제된 `LineShape`입니다.
 */
export interface RenderableEvent {
  target: LineShape;
}

/**
 * 선택 이벤트입니다.
 *
 * - `prev`: 이전에 선택되었던 LineShape 객체. 아무것도 선택되지 않았었다면 null
 * - `next`: 새롭게 선택된 LineShape 객체. 아무것도 선택되지 않았다면 null
 */
export interface SelectionEvent {
  prev: LineShape | null;
  next: LineShape | null;
}

type EventRecord = {
  "renderable:added": RenderableEvent;
  "renderable:removed": RenderableEvent;
  modified: RenderableEvent;
  modifying: RenderableEvent;
  "selection:updated": SelectionEvent;
};

export type RendererEventListener<T extends keyof EventRecord> = (
  e: EventRecord[T]
) => void;

import { Renderer, LineShape, RendererEventListener } from "@renderer";

const canvasRef = useRef<HTMLCanvasElement>(null);
const renderer = new Renderer(canvasRef.current);

// 라인 추가, 이벤트 발행
renderer.add([shape]);

// 라인 삭제, 이벤트 생략
renderer.remove([shape], { skipFireEvent: true });

// 모든 라인 삭제
renderer.remove(renderer.getShapes());

// 현재 선택된 라인
const selectedLineShape: LineShape | null = renderer.getActiveShape();

// 이벤트 리스너 등록 및 삭제
const onModified: RendererEventListener<"modified"> = (e) => {
  console.log(e.target);
};
renderer.addListener("modified", onModified);
renderer.removeListener("modified", onModified);

type DefaultData = Record<string, any>;

class LineShape<Data extends DefaultData = DefaultData> {
  /**
   * `LineShape`에 저장할 데이터입니다.
   */
  public data: Data;

  /**
   * @param options
   * - `coordinates`: [Point, Point]
   * - `data`: `LineShape`에 저장할 데이터입니다.
   */
  constructor(options: { coordinates: [Point, Point]; data?: Data });

  /**
   * `LineShape`의 좌표입니다.
   */
  get coordinates(): [Point, Point];
}

const lineShape = new LineShape({
  data: {
    id: 1,
  },
  coordinates: [
    { x: 0, y: 0 },
    { x: 10, y: 10 },
  ],
});
renderer.add([lineShape]);

const lineId = lineShape.data.id;

interface Point {
  x: number;
  y: number;
}