"use client";
import * as React from "react";

import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/app/lib/utils";
import * as TogglePrimitive from "@radix-ui/react-toggle";

import { StarIcon as StarFilled } from "@astraicons/react/bold";
import { StarIcon } from "@astraicons/react/linear";

const ratingVariants = cva("inline-flex items-center", {
  variants: {
    variant: {
      default:
        "data-[state=on]:text-warning-surface data-[state=off]:text-grayscale-textIcon-disable",
      outline:
        "data-[state=on]:text-warning-surface data-[state=off]:text-grayscale-textIcon-disable",
    },
    label: {
      true: "select-none cursor-default pointer-events-none",
      false: "gap-x-1",
    },
  },
  defaultVariants: {
    variant: "default",
    label: false,
  },
});

const starVariants = cva("", {
  variants: {
    size: {
      xs: "w-3 h-3",
      sm: "w-[18px] h-[18px]",
      md: "w-6 h-6",
      lg: "w-8 h-8",
    },
  },
  defaultVariants: {
    size: "md",
  },
});

export interface RatingProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof ratingVariants> {
  size?: "xs" | "sm" | "md" | "lg";
  variant?: "default" | "outline";
  label?: boolean;
  definedRating?: number;
}

const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
  (
    { size, variant, definedRating, label, className, children, ...props },
    ref
  ) => {
    const [currentRating, setCurrentRating] = React.useState<number>(
      label ? 1 : definedRating ?? 0
    );

    const handleToggle = (rating: number) => {
      setCurrentRating((prev) => (prev === rating ? 0 : rating));
    };

    return (
      <div
        className={cn(ratingVariants({ label }), "w-fit", className)}
        ref={ref}
        {...props}
      >
        {[...Array(label ? 1 : 5)].map((_, index) => (
          <TogglePrimitive.Root
            data-current-rating={index + 1}
            key={index}
            pressed={index < currentRating}
            onPressedChange={() => handleToggle(index + 1)}
            className={cn(ratingVariants({ variant }), "", className)}
          >
            {variant === "outline" ? (
              index < currentRating ? (
                <StarFilled className={cn(starVariants({ size }), "")} />
              ) : (
                <StarIcon className={cn(starVariants({ size }), "size-6")} />
              )
            ) : (
              <StarFilled className={cn(starVariants({ size }), "")} />
            )}
          </TogglePrimitive.Root>
        ))}
        {children}
      </div>
    );
  }
);

Rating.displayName = "Rating";

export { Rating };
Components
