import React, { useEffect, useState } from 'react';
import * as d3 from 'd3';
import axios from 'axios';
import { query, collection, onSnapshot, getDocs } from 'firebase/firestore';

import './DeviceGraph.css';
import AbsorbanceGraph from './AbsorbanceGraph';
import db from '../firebase';

function DeviceGraph({url}) {
    const [devices, setDevices] = useState([]);
    const [hposTests, setHposTests] = useState(null);

    async function getTests() {
        try {
            const testDataCol = collection(db, 'testData');
            const testDataSnapshot = await getDocs(testDataCol);
            const testDataList = testDataSnapshot.docs.map(doc => doc.data());
            console.log(testDataList);
            //   setHposTests(testDataList);
            return testDataList;
        } catch (err) {
            // log error
        }
    }

    // useEffect(() => {
    //     const q = query(collection(db, "testData"));

    //     const unsub = onSnapshot(q, (querySnapshot) => {
    //         const testDevices = [];
    //         querySnapshot.forEach((document) => {
    //             const hposTestData = document.data();
    //             // testDevices.push(hposTestData);
    //             // const { deviceSerialNo } = hposTestData;
    //             // console.log(document.data());
    //         });
    //         // setDevices(testDevices);
    //     });

    //     return () => unsub;
    // }, []);

    // useEffect(() => {
    //     // const q = query(collection(db, "testData"));

    //     // const unsub = onSnapshot(q, (querySnapshot) => {
    //     //     const testDevices = [];
    //     //     querySnapshot.forEach((document) => {
    //     //         const hposTestData = document.data();
    //     //         // testDevices.push(hposTestData);
    //     //         // const { deviceSerialNo } = hposTestData;
    //     //         console.log(document.data());
    //     //     });
    //     //     setDevices(testDevices);
    //     // });

    //     if (hposTests !== null) {
    //         const result = getTests();
    //         setHposTests(result);
    //     }
    // }, []);

    return (
        <div>
            <AbsorbanceGraph url={url} />
        </div>
    );
}
export default DeviceGraph;