import { X } from "lucide-react";
import { useSizeAttributes } from "~/requestHandler/use-product-hooks";

interface SizeSelectorProps {
  selectedSizes: string[];
  onToggleSize: (size: string) => void;
  onRemoveSize: (size: string) => void;
}

export const SizeSelector: React.FC<SizeSelectorProps> = ({
  selectedSizes,
  onToggleSize,
  onRemoveSize,
}: SizeSelectorProps) => {
  const { data: sizes, isLoading } = useSizeAttributes();
  if (isLoading) {
    return (
      <div className="space-y-4">
        <h4 className="font-medium text-right">انتخاب سایز های موجود:</h4>
        <div className="grid grid-cols-4 gap-2">
          {[...Array(7)].map((_, i) => (
            <div
              key={i}
              className="py-3 px-4 rounded-lg border-2 border-WHITE2 bg-WHITE3 animate-pulse h-12"
            />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h4 className="font-medium text-right">انتخاب سایز های موجود:</h4>
      <p className="text-xs text-GRAY text-right">
        اگر محصول تک‌سایز است، «فری سایز» را انتخاب کنید.
      </p>

      <div className="grid grid-cols-4 gap-2">
        {sizes.map((size) => (
          <>
            {size.value !== "UNSELECTED" && (
              <button
                key={size.id}
                onClick={() => onToggleSize(size.value)}
                className={`py-3 px-4 rounded-lg border-2 text-sm font-medium transition-all ${
                  selectedSizes.includes(size.value)
                    ? "border-blue-500 bg-blue-50 text-blue-700"
                    : "border-WHITE2 hover:border-GRAY3 hover:bg-WHITE3"
                }`}
              >
                {size.info?.persian || size.value}
              </button>
            )}
          </>
        ))}
      </div>

      {/* Selected Sizes */}
      {selectedSizes.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {selectedSizes.map((sizeValue) => {
            const sizeInfo = sizes.find((s) => s.value === sizeValue);
            return (
              <div
                key={sizeValue}
                className="flex items-center gap-1 bg-blue-100 px-3 py-1 rounded-full text-sm text-blue-700"
              >
                <span>{sizeInfo?.info?.persian || sizeValue}</span>
                <X
                  onClick={() => onRemoveSize(sizeValue)}
                  className="w-4 h-4 cursor-pointer text-red-500"
                />
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};