"use client";

import {
  BottomActionButton,
  BottomActionButtonProps,
} from "@/components/widgets/BottomActionButton/BottomActionButton";
import CircularProgressbarsList from "@/components/widgets/CircularProgressbarsList/CircularProgressbarsList";
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";
import { cn } from "@/lib/utils";
import { useState } from "react";

interface LoadersProps extends Omit<React.ComponentProps<"div">, "title"> {
  circularProgressbarsListProps: React.ComponentProps<
    typeof CircularProgressbarsList
  >;
  bottomActionButtonProps?: BottomActionButtonProps;
}

function Loaders({
  circularProgressbarsListProps,
  bottomActionButtonProps,
  ...props
}: LoadersProps) {
  const {
    height: bottomActionButtonHeight,
    elementRef: bottomActionButtonRef,
  } = useDynamicSize<HTMLDivElement>({
    defaultHeight: 132,
  });
  const [isVisibleButton, setIsVisibleButton] = useState(false);

  const onAnimationEnd = () => {
    setIsVisibleButton(true);
    circularProgressbarsListProps.onAnimationEnd?.();
  };

  return (
    <div
      className="w-full flex flex-col items-center gap-[22px]"
      {...props}
      style={{
        paddingBottom: `${bottomActionButtonHeight}px`,
        ...props.style,
      }}
    >
      <CircularProgressbarsList
        {...circularProgressbarsListProps}
        transitionDurationItem={3000}
        onAnimationEnd={onAnimationEnd}
      />
      {bottomActionButtonProps && (
        <BottomActionButton
          {...bottomActionButtonProps}
          className={cn(
            "max-w-[560px] z-10 transition-opacity duration-300",
            !isVisibleButton && "opacity-0 pointer-events-none",
            isVisibleButton && "opacity-100 pointer-events-auto",
            bottomActionButtonProps.className
          )}
          ref={bottomActionButtonRef}
        />
      )}
    </div>
  );
}

export { Loaders };
