import { MutableRefObject } from "react";
// components
// ui
import { Loader } from "@plane/ui";
// types
import { IGanttBlock, IBlockUpdateData } from "@/components/gantt-chart/types";
import { GanttDnDHOC } from "../gantt-dnd-HOC";
import { handleOrderChange } from "../utils";
import { IssuesSidebarBlock } from "./block";

type Props = {
  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
  blocks: IGanttBlock[] | null;
  enableReorder: boolean;
  showAllBlocks?: boolean;
};

export const IssueGanttSidebar: React.FC<Props> = (props) => {
  const { blockUpdateHandler, blocks, enableReorder, showAllBlocks = false } = props;

  const handleOnDrop = (
    draggingBlockId: string | undefined,
    droppedBlockId: string | undefined,
    dropAtEndOfList: boolean
  ) => {
    handleOrderChange(draggingBlockId, droppedBlockId, dropAtEndOfList, blocks, blockUpdateHandler);
  };

  return (
    <div>
      {blocks ? (
        blocks.map((block, index) => {
          const isBlockVisibleOnSidebar = block.start_date && block.target_date;

          // hide the block if it doesn't have start and target dates and showAllBlocks is false
          if (!showAllBlocks && !isBlockVisibleOnSidebar) return;

          return (
            <GanttDnDHOC
              key={block.id}
              id={block.id}
              isLastChild={index === blocks.length - 1}
              isDragEnabled={enableReorder}
              onDrop={handleOnDrop}
            >
              {(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => (
                <IssuesSidebarBlock
                  block={block}
                  enableReorder={enableReorder}
                  isDragging={isDragging}
                  dragHandleRef={dragHandleRef}
                />
              )}
            </GanttDnDHOC>
          );
        })
      ) : (
        <Loader className="space-y-3 pr-2">
          <Loader.Item height="34px" />
          <Loader.Item height="34px" />
          <Loader.Item height="34px" />
          <Loader.Item height="34px" />
        </Loader>
      )}
    </div>
  );
};