import React, { useEffect, useState, useRef } from 'react';
import { query, collection, onSnapshot, where, orderBy, limit } from 'firebase/firestore';
import moment from 'moment';

import db from '../firebase';
import './Diagnostics.css';

const Diagnostics = () => {
    const [samples, setSamples] = useState([]);

    useEffect(() => {
        if (!samples.length) {
            const q = query(collection(db, "diagnostics"), where("runTime", ">=", moment().format("YYYY-MM-DD").toString()), orderBy("runTime", "desc"));

            const unsub = onSnapshot(q, (querySnapshot) => {
                const samples = [];
                querySnapshot.forEach((document) => {
                    console.log(document.id);
                    const data = document.data();
                    const id = document.id;
                    samples.push({id, ...data});
                });
                setSamples(samples);
            });

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

    return (
        <div>
            {/* <div className='samples-heading'><h3>Samples page for denovix useage</h3></div>
            {samples.length ? (
                samples.map((alert, index) => (
                    <div key={index} className='samples-card'>
                        <div tabIndex={index}><strong>{alert._id}</strong></div>
                        <p className='sample-time'>{alert.testTime}</p>
                        <p className='sample-time-ago'>{moment(alert.testTime).fromNow()}</p>
                    </div>
                ))
            ) : (
                <div className='no-samples-message'>Samples will appear as in when a test is recorded</div>
            )} */}


            <h1>Device Data</h1>

            <div className='samples-container'>
                <table id="samples-table">
                    <tr>
                        <th>Device</th>
                        <th>Raw Data</th>
                        <th>Time</th>
                    </tr>
                    {samples.map((sample, index) => (
                        <tr key={index} className='samples-table-tr'>
                            <td>{sample.deviceId}</td>
                            <td>{sample.deviceData || 'NA'}</td>
                            <td>{moment(sample.runTime).format('HH:mm:ss')}</td>
                        </tr>
                    ))}
                </table>
            </div>
        </div>
    )
}

export default Diagnostics;