import {
  TLBaseShape,
  TLResizeHandle,
  BaseBoxShapeUtil,
  //TLShapeUtilFlag,
  resizeBox,
  VecModel,
  Box,
  TLResizeMode,
  Rectangle2d,
} from "tldraw"

export interface HTMLShape
  extends TLBaseShape<"html", { w: number; h: number; html: string }> {
  props: {
    w: number
    h: number
    html: string
  }
}

export class HTMLShapeUtil extends BaseBoxShapeUtil<HTMLShape> {
  static override type = "html" as const
  override canBind = () => true
  override canEdit = () => false
  override canResize = () => true
  override isAspectRatioLocked = () => false

  getDefaultProps(): HTMLShape["props"] {
    return {
      w: 100,
      h: 100,
      html: "<div></div>",
    }
  }

  override onBeforeUpdate = (prev: HTMLShape, next: HTMLShape): void => {
    if (prev.x !== next.x || prev.y !== next.y) {
      this.editor.bringToFront([next.id])
    }
  }

  override onResize = (
    shape: HTMLShape,
    info: {
      handle: TLResizeHandle
      mode: TLResizeMode
      initialBounds: Box
      initialShape: HTMLShape
      newPoint: VecModel
      scaleX: number
      scaleY: number
    },
  ) => {
    const element = document.getElementById(shape.id)
    if (!element || !element.parentElement) return resizeBox(shape, info)
    const { width, height } = element.parentElement.getBoundingClientRect()
    if (element) {
      const isOverflowing =
        element.scrollWidth > width || element.scrollHeight > height
      if (isOverflowing) {
        element.parentElement?.classList.add("overflowing")
      } else {
        element.parentElement?.classList.remove("overflowing")
      }
    }
    return resizeBox(shape, info)
  }

  getGeometry(shape: HTMLShape) {
    return new Rectangle2d({
      width: shape.props.w,
      height: shape.props.h,
      isFilled: true,
    })
  }

  override component(shape: HTMLShape): JSX.Element {
    return (
      <div
        id={shape.id}
        dangerouslySetInnerHTML={{ __html: shape.props.html }}
      />
    )
  }

  override indicator(shape: HTMLShape): JSX.Element {
    return <rect width={shape.props.w} height={shape.props.h} />
  }
}