import React,{useEffect,useState} from 'react'

const TableRow = (props) => {
    const [image, updateImage] = React.useState("");
    //Create new_state Object for Gradcam
    const [GradCam, updateGradCam] = React.useState(null);
//    {"0":["covid"],"1":["nofinding"],"2":["opacity"]}

    const createTag = (tag) =>{
        if(tag=="covid"){
            return(<span
                class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight">
                <span aria-hidden
                    class="absolute inset-0 bg-red-200 opacity-50 rounded-full"></span>
                <span class="relative">Suspected Covid</span>
            </span>)
        }
        if(tag=="nofinding"){
            return(<span
                class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                <span aria-hidden
                    class="absolute inset-0 bg-green-200 opacity-50 rounded-full"></span>
                <span class="relative">No Findings</span>
            </span>)
        }
        if(tag=="opacity"){
            return(<span
                class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                <span aria-hidden
                    class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"></span>
                <span class="relative">Opacity</span>
            </span>)
        }
    }

    useEffect(() => {
        // Create an scoped async function in the hook
        async function getImage() {
            fetch(`http://backend:5000/uploads/${props.filename}`)
            .then(response => response.blob())
            .then(blob => updateImage(URL.createObjectURL(blob)))
        }
        //Modify this to the api endpoint for the gradcam
        
        //Only Image is called by default
        getImage();
        // if(props.prediction!="nofinding"){
        //     updateGradCam("NA")
        // }else{
        //     getGradcam();
        // }
        
      }, []);

    async function getGradcam() {
        fetch(`http://backend:5000/gradcam/${props.filename}`)
        .then(response => response.blob())
        .then(blob => updateGradCam(URL.createObjectURL(blob)))
    }

    const renderGradcam = (GradCam) => {
        if(GradCam === null){
            return (
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick = {()=>getGradcam()}>
                Generate Gradcam
                </button>
            )
        }
        else{
            return <img style = {{minWidth:"130px",maxWidth:"130px"}} alt="home" src={ GradCam }></img>
        }
    }

    const Tag = createTag(props.prediction)
    
    
        return (
            <tr>
                <td class="px-5 py-5 bg-white text-sm">
                    <p class="text-gray-900 whitespace-no-wrap">{props.filename}</p>
                </td>
                <td class="px-5 py-5 bg-white text-sm">
                    <p class="text-gray-900 whitespace-no-wrap">{props.patientId}</p>
                </td>
                <td class="px-5 py-5 bg-white text-sm">
                    <p class="text-gray-900 whitespace-no-wrap">{props.sex}</p>
                </td>
                <td class="px-5 py-5 bg-white text-sm">
                    <p class="text-gray-900 whitespace-no-wrap">{props.Age}</p>
                </td>
                <td class="px-5 py-5 bg-white text-sm">
                    <p class="text-gray-900 whitespace-no-wrap">{props.view}</p>
                </td>
                <td class="px-5 py-5 bg-white text-sm">
                    <p class="text-gray-900 whitespace-no-wrap">{Tag}</p>
                </td>
                <td class="px-5 py-5 bg-white text-sm">
                    { image && <img style = {{minWidth:"130px",maxWidth:"130px"}} alt="home" src={ image }></img> }
                </td>
                <td class="px-5 py-5 bg-white text-sm">
                    {props.prediction === "nofinding" ? "No Gradcam Avaliable" : renderGradcam(GradCam)}
                </td>
            </tr>
        )
    
    
}

export default TableRow;