import React, { useEffect, useState } from 'react';
import { query, collection, onSnapshot } from 'firebase/firestore';
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import moment from 'moment';

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

const Calibrations = () => {
    const [device, setDevice] = useState("Select a device");
    const [devices, setDevices] = useState([]);
    const [curDeviceData, setCurDeviceData] = useState(null);

    const changeDevice = ({ value }) => {
        setDevice(value);
    }

    const toggleShowDevice = () => {
        console.log(devices.filter(x => x.deviceId === device))
        setCurDeviceData(devices.find(x => x.deviceId === device));
        // if (!device) {
        //     setCurDeviceData(devices.filter(x => x.deviceId === device));
        // } else {
        //     setDevice(null);
        // }
    }

    useEffect(() => {
        if (!devices?.length) {
            const q = query(collection(db, "devices"));

            const unsub = onSnapshot(q, (querySnapshot) => {
                const testDevices = [];
                querySnapshot.forEach((document) => {
                    const deviceData = document.data();
                    testDevices.push(deviceData);
                });
                setDevices(testDevices);
            });

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

    return (
        <div className="calibrations-page">
            <div className='page-title'>Calibrations</div>
            <div className='dropdown-group'>
                <Dropdown className='device-dropdown' options={devices?.map(x => x.deviceId)} onChange={changeDevice} value={device} placeholder="Select an device" />

                <button className='clear-button' onClick={toggleShowDevice}><img className="graph-icon" src={require('../assets/graph_icon.png')} alt='icon'></img>{device ? 'Clear' : 'Show'}</button>
            </div>

            <div className='graph-person-conatiner'>
                {curDeviceData && <div className='test-details'>
                    <table>
                        <tr>
                            <th>key</th>
                            <th>value</th>
                        </tr>
                        <tr>
                            <td>device</td> <td>{curDeviceData?.deviceId} </td>
                        </tr>
                        <tr>
                            <td>calibratedAt</td> <td>{curDeviceData?.calibratedAt} </td>
                        </tr>
                        <tr>
                            <td>coefficients</td> <td>{curDeviceData?.coefficients?.toString()} </td>
                        </tr>
                    </table>
                </div>}
            </div>
        </div>
    )
}

export default Calibrations;