import React, { useEffect, useState } from 'react';
import { FaInfoCircle } from "react-icons/fa";
import axios from 'axios';

import './CurveFit.css';
import ImageDownloader from './ImageDownloader';

function CurveFit({ show }) {
    const [showCardInfo, setShowCardInfo] = useState(false);
    const [svgData, setSvgData] = useState(null);

    const fetchSvg = () => {
        axios({
            method: 'get',
            url: "https://asia-south1-hpos-qa.cloudfunctions.net/curvefit",
            data: {
                "_id": "id",
                "underMedication": false,
                "underTransfusion": false,
                "userImageURL": "https://hpos-prod.web.app/logo.png"
            },
            withCredentials: false,
            secure: false,
            headers: {
                "Content-Type": "application/json",
                // "x-client": "e16a1bd15af2ee640f5a7a18c8d8333f5f01f7c66e003bbc21ee52870f1bce27",
            },
        })
            .then(response => response.data)
            .then((data) => {
                // setMessage(`${id} is being created`);
                // setSvgData(data?.plot?.replace('\"', '').replace('\n', '').replace('"', "'"));
            })
            .catch((err) => {
                console.log(err);
                // setMessage(`error: ${err?.message}`);
            });
    }

    useEffect(() => {
        if (!svgData) {
            // fetchSvg();
        }
    }, []);

    return (
        <div>
            <h1>Curve Fit</h1>
            {/* <img alt='' src={ svgData }/>; */}
            <img src="https://asia-south1-hpos-qa.cloudfunctions.net/curvefit" width="450" height="340" />

            {/* <ImageDownloader /> */}
        </div>
    );
}
export default CurveFit;