import { observer } from "mobx-react";
import type { RefObject } from "react";
import React from "react";
// hooks
import type { IGanttBlock } from "@buzzwaretech/types";
// helpers
import { cn } from "@buzzwaretech/utils";
//  BuzzwareTech-web
import {
    LeftDependencyDraggable,
    RightDependencyDraggable,
} from "@/buzzwareTech-web/components/gantt-chart";
//
import { LeftResizable } from "./blockResizables/left-resizable";
import { RightResizable } from "./blockResizables/right-resizable";

type Props = {
  block: IGanttBlock;
  blockToRender: (data: any) => React.ReactNode;
  handleBlockDrag: (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
    dragDirection: "left" | "right" | "move",
  ) => void;
  isMoving: "left" | "right" | "move" | undefined;
  enableBlockLeftResize: boolean;
  enableBlockRightResize: boolean;
  enableBlockMove: boolean;
  enableDependency: boolean | ((blockId: string) => boolean);
  ganttContainerRef: RefObject<HTMLDivElement>;
};

export const ChartDraggable = observer(function ChartDraggable(props: Props) {
  const {
    block,
    blockToRender,
    handleBlockDrag,
    enableBlockLeftResize,
    enableBlockRightResize,
    enableBlockMove,
    enableDependency,
    isMoving,
    ganttContainerRef,
  } = props;

  return (
    <div className="group relative z-[5] inline-flex h-full w-full cursor-pointer items-center font-medium transition-all">
      {/* left resize drag handle */}
      {(typeof enableDependency === "function"
        ? enableDependency(block.id)
        : enableDependency) && (
        <LeftDependencyDraggable
          block={block}
          ganttContainerRef={ganttContainerRef}
        />
      )}
      <LeftResizable
        enableBlockLeftResize={enableBlockLeftResize}
        handleBlockDrag={handleBlockDrag}
        isMoving={isMoving}
        position={block.position}
      />
      <div
        className={cn(
          "relative z-[6] flex h-8 w-full items-center rounded-sm",
          {
            "pointer-events-none": isMoving,
          },
        )}
        onMouseDown={(e) => enableBlockMove && handleBlockDrag(e, "move")}
      >
        {blockToRender({ ...block.data, meta: block.meta })}
      </div>
      {/* right resize drag handle */}
      <RightResizable
        enableBlockRightResize={enableBlockRightResize}
        handleBlockDrag={handleBlockDrag}
        isMoving={isMoving}
        position={block.position}
      />
      {(typeof enableDependency === "function"
        ? enableDependency(block.id)
        : enableDependency) && (
        <RightDependencyDraggable
          block={block}
          ganttContainerRef={ganttContainerRef}
        />
      )}
    </div>
  );
});