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="relative pb-[133%]">
        <div className="bg-surface-element-normal rounded-m border-surface-element-normal absolute inset-0 flex flex-col items-center justify-center border border-dashed p-2">
          <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="relative pb-[133%]">
        <div className="bg-surface-element-normal rounded-m border-surface-element-normal absolute inset-0 flex flex-col items-center justify-center border border-dashed p-2">
          <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="rounded-m group relative cursor-pointer pb-[133%]">
      <div
        className={cn(
          'bg-surface-element-normal absolute inset-0 rounded-lg',
          checked &&
            "before:bg-surface-element-normal before:border-primary-normal before:absolute before:-inset-1 before:-top-2 before:-left-2 before:rounded-lg before:border-2 before:content-['']"
        )}
      >
        <Image
          src={imageUrl || ''}
          alt="image"
          width={720}
          height={1280}
          className="rounded-m block h-full w-full cursor-pointer object-cover object-top"
          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 right-2 bottom-2 z-[1] opacity-0 transition-opacity group-hover:opacity-100"
        onClick={() => onImageView && onImageView(imageUrl || '')}
      />
    </div>
  )
}

export default GenaralImageCard
