import { IconButton } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { useGenerationProgress } from "@/hooks/useGenerationProgress";
import { cn } from "@/lib/utils";
import { ContentStatus, GenImageOutput } from "@/services/create";
import Image from "next/image";

const GenaralImageCard = ({
  image,
  checked,
  onClick,
  onImageView,
  uniqueId,
}: {
  image: GenImageOutput;
  checked: boolean;
  onClick: (imageUrl: string) => void;
  onImageView?: (imageUrl: string) => void;
  uniqueId?: string;
}) => {
  const { imageUrl, status } = image;
  const progress = useGenerationProgress(status === ContentStatus.Pending, uniqueId);

  if (status === ContentStatus.Failed) {
    return (
      <div className="pb-[133%] relative">
        <div className="absolute inset-0 bg-surface-element-normal rounded-m border border-dashed border-surface-element-normal p-2 flex flex-col justify-center items-center">
          <Image src="/icons/status-error.svg" alt="image" width={32} height={32} />
          <p className="text-txt-primary-normal txt-label-m mt-8">
            Failed to generate
          </p>
        </div>
        <Image src="/icons/generate-logo.svg" alt="image" className="absolute bottom-8 left-1/2 -translate-x-1/2" width={104} height={32} />
      </div>
    )
  }

  if (status === ContentStatus.Pending) {
    return (
      <div className="pb-[133%] relative">
        <div className="absolute inset-0 bg-surface-element-normal rounded-m border border-dashed border-surface-element-normal p-2 flex flex-col justify-center items-center">
          <Image src="/icons/image-generate-loading.png" alt="image" width={96} height={96} />
          <p className="text-txt-primary-normal txt-label-s">
            Generating {progress}%...
          </p>
        </div>
        <Image src="/icons/generate-logo.svg" alt="image" className="absolute bottom-8 left-1/2 -translate-x-1/2" width={104} height={32} />
      </div>
    );
  }

  return (
    <div className="pb-[133%] relative rounded-m cursor-pointer group">
      <div
        className={cn("absolute inset-0 bg-surface-element-normal rounded-lg",
          checked && "before:content-[''] before:absolute before:-left-2 before:-top-2 before:-inset-1 before:bg-surface-element-normal before:rounded-lg before:border-2 before:border-primary-normal"
        )}
      >
        <Image
          src={imageUrl || ''}
          alt="image"
          width={720}
          height={1280}
          className="block w-full h-full object-cover object-top rounded-m cursor-pointer"
          onClick={() => onClick(imageUrl || '')}
        />
      </div>
      <div className="absolute top-2 right-2 z-[1] cursor-pointer">
        <Checkbox shape="round" checked={checked} onClick={(e) => {
          e.stopPropagation();
          onClick(imageUrl || '');
        }} />
      </div>
      <IconButton
        iconfont="icon-icon-fullImage"
        variant="tertiaryDark"
        size="small"
        className="absolute bottom-2 right-2 z-[1] opacity-0 group-hover:opacity-100 transition-opacity"
        onClick={() => onImageView && onImageView(imageUrl || '')}
      />
    </div>
  );
}
 
export default GenaralImageCard;