import React, { useState } from 'react';
import { FaInfoCircle } from "react-icons/fa";
import { AiOutlineLoading } from "react-icons/ai";
import DatePicker from "react-datepicker";
import moment from 'moment';
import axios from 'axios';

import "react-datepicker/dist/react-datepicker.css";
import './Accuracy.css';

function Accuracy({ show }) {
    const [showCardInfo, setShowCardInfo] = useState(false);
    const [startDate, setStartDate] = useState("");
    const [endDate, setEndDate] = useState("");
    const [selectedFile, setSelectedFile] = useState(null);
    const [loading, setLoading] = useState(false);

    const handleFileChange = (event) => {
        setSelectedFile(event.target.files[0]);
    };


    const fetchFile = async (start_date, end_date) => {
        try {
            setLoading(true);

            if (selectedFile) {
                const formData = new FormData();
                formData.append('file', selectedFile);

                const queryString = `start_date=${moment(startDate).format(
                    'YYYY-MM-DD'
                )}&end_date=${moment(endDate).format('YYYY-MM-DD')}`;

                const url = `https://asia-south1-hpos-qa.cloudfunctions.net/performance?${queryString}`;

                // Make a POST request using the Fetch API
                const response = await fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        // Add any necessary headers
                        // 'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
                    },
                });

                // Check if the request was successful (status code 2xx)
                if (response.ok) {
                    // Create a blob from the response data
                    const blob = await response.blob();

                    // Create a download link and trigger a click to download the file
                    const link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = 'autoanlysis.xlsx'; // Set the desired file name
                    document.body.appendChild(link);
                    link.click();

                    // Clean up
                    document.body.removeChild(link);
                } else {
                    console.error('Error downloading file:', response.statusText);
                }
            }
        } catch (error) {
            console.error('Error downloading file:', error);
        } finally {
            setLoading(false); // Set loading back to false when the request completes
        }
    };


    return (
        <div>
            <h1>Auto Analysis</h1>
            <div>Maintain correct formatting while taking the readings for this to work</div>
            <div className='dates'>
                <input type="file" onChange={handleFileChange} />
                <div className='start-date'>
                    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} placeholderText='start date' />
                </div>
                <div className='end-date'>
                    <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} placeholderText='end date' />
                </div>
            </div>
            <div className='download-row'>
                <div className='button' onClick={() => fetchFile(startDate, endDate)}>
                    {loading ? (
                        <AiOutlineLoading className="loading-icon" />
                    ) : (
                        'Download Excel'
                    )}
                </div>
            </div>
        </div>
    );
}
export default Accuracy;