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

import './Samples.css';
import db from '../firebase';
import moment from 'moment';

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

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

            const unsub = onSnapshot(q, (querySnapshot) => {
                const samples = [];
                querySnapshot.forEach((document) => {
                    console.log(document.data());
                    const alert = document.data();
                    samples.push(alert);
                });
                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>
            )}
        </div>
    )
}

export default Samples;