import { SarifApiResponse } from '../lib/apiClient'
import { cn } from '../lib/utils'
import ResultTable from './ResultTable'

interface Props {
    currentScan: SarifApiResponse | null
}

export default function ResultGrid({ currentScan }: Props) {
    return (
        <div className="py-10">
            {currentScan && (
                <div className="container mx-auto">
                    <div className="mx-auto max-w-7xl px-6 lg:px-8">
                        <div className="mb-8">
                            <h2 className="mb-1 text-2xl font-semibold">
                                Displaying results for:
                            </h2>
                            <a
                                target="_blank"
                                className="text-lg font-medium text-blue-500"
                                href={
                                    currentScan?.runs[0].properties
                                        .testedRepository
                                }
                                rel="noreferrer"
                            >
                                {
                                    currentScan?.runs[0].properties
                                        .testedRepository
                                }
                            </a>
                        </div>
                        <div className="-mx-6 grid grid-cols-2 gap-0.5 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-3">
                            {currentScan.runs[0].properties.testedRepository &&
                                currentScan?.runs[0].properties.badges
                                    .sort((a, b) =>
                                        a.badgeId.localeCompare(b.badgeId),
                                    )
                                    .map((badge) => (
                                        <div
                                            className="relative bg-gray-400/10 p-6"
                                            key={`${badge.badgeId}-${badge.badgeLevel}`}
                                        >
                                            <img
                                                className={cn(
                                                    'h-40 w-full object-contain',
                                                    !badge.badgeGranted &&
                                                        'opacity-30 grayscale',
                                                )}
                                                src={badge.badgeUrl}
                                                alt={badge.badgeId}
                                            />
                                            {!badge.badgeGranted && (
                                                <div className="absolute inset-0 top-40 flex flex-col items-center justify-center">
                                                    <p className="text-lg font-semibold">
                                                        Not granted
                                                    </p>
                                                </div>
                                            )}
                                        </div>
                                    ))}
                        </div>
                        <div className="mt-12">
                            <ResultTable currentScan={currentScan} />
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}