import { range } from "lodash-es";
import { forwardRef } from "react";
// buzzwareTech ui
import { ContentWrapper } from "@buzzwaretech/ui";
// buzzwareTech utils
import { cn } from "@buzzwaretech/utils";

export const KanbanIssueBlockLoader = forwardRef(
  function KanbanIssueBlockLoader(
    {
      cardHeight = 100,
      shouldAnimate = true,
    }: { cardHeight?: number; shouldAnimate?: boolean },
    ref: React.ForwardedRef<HTMLSpanElement>,
  ) {
    return (
      <span
        ref={ref}
        className={cn(
          `block rounded-sm bg-[var(--illustration-fill-secondary)]`,
          { "animate-pulse": shouldAnimate },
        )}
        style={{ height: `${cardHeight}px` }}
      />
    );
  },
);

export function KanbanColumnLoader({
  cardsInColumn = 3,
  ignoreHeader = false,
  cardHeight = 100,
  shouldAnimate = true,
}: {
  cardsInColumn?: number;
  ignoreHeader?: boolean;
  cardHeight?: number;
  shouldAnimate?: boolean;
}) {
  return (
    <div className="flex flex-col gap-3">
      {!ignoreHeader && (
        <div className="flex h-9 w-80 items-center justify-between">
          <div className="item-center flex gap-3">
            <span
              className={cn("h-6 w-6 rounded-sm bg-layer-1", {
                "animate-pulse": shouldAnimate,
              })}
            />
            <span
              className={cn("h-6 w-24 rounded-sm bg-layer-1", {
                "animate-pulse": shouldAnimate,
              })}
            />
          </div>
        </div>
      )}
      {range(cardsInColumn).map((cardIndex) => (
        <KanbanIssueBlockLoader
          key={cardIndex}
          cardHeight={cardHeight}
          shouldAnimate={shouldAnimate}
        />
      ))}
    </div>
  );
}

KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";

export function KanbanLayoutLoader({
  cardsInEachColumn = [2, 3, 2, 4, 3],
}: {
  cardsInEachColumn?: number[];
}) {
  return (
    <ContentWrapper className="flex-row gap-5 overflow-x-auto py-1.5">
      {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
        <KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
      ))}
    </ContentWrapper>
  );
}