import React, { useState } from 'react'
import PropTypes from 'prop-types'
import ToggleSwitch from '../toggleswitch'
import useFetch from '../../hooks/use-fetch'
import ErrorItem from './ErrorItem';
import useInterval from '../../hooks/use-interval';
import LoadingItem from './LoadingItem';

/**
 * This component is just a container used to hold any {@link ToggleSwitch} sensor item.
 * It is responsible for making periodic calls to fetch the current state of the sensor 
 * to be displayed in the dashboard. It relies on {@link useFetch} and {@link useInterval} hooks.
 * 
 * @category Dashboard
 * 
 * @component
 * 
 */
const ToggleSwitchItem = ({url, type}) => {
    const [startTime, setStartTime] = useState(Date.now());
    const {isLoading, isError, data} = useFetch(url, 'GET', null, startTime);

    useInterval(() => {
        setStartTime(Date.now());
        }
    );

    if (isLoading){
        return <LoadingItem/>;
    }

    if (isError){
        return <ErrorItem url={url}/>;
    }

    console.log(data);

    let checked = false;
    switch (type) {
        case 'motionDetected':
            checked = data['motionDetected'] === true;
            break;
        case 'openClose':
            checked = data['openClose'] === true;
            break;
        case 'onOff':
            checked = data['onOff'] === true;
            break;
        default:
            break;
    }

    return (
        <div>
            <div className="card-body">
                <div className="tachometer">
                    <div className="tachometercontainer">
                        <ToggleSwitch checked={checked} type={type}/>
                    </div>
                </div>
            </div>
        </div>
    )
}

ToggleSwitchItem.propTypes = {
    /**
     * The endpoint to fetch the current switch state from.
     */
    url: PropTypes.string.isRequired,
    /**
     * The type of switch it is. It must be one of <em>onOff</em>, <em>openClose</em> or <em>motionDetected</em>.
     */
    type: PropTypes.oneOf(['onOff', 'openClose', 'motionDetected']).isRequired
}

export default ToggleSwitchItem