import React from 'react'
import PropTypes from 'prop-types'
import { Line} from 'react-chartjs-2'

/**
 * This is a component used to display a time series graph of the history of values for the
 * single-property items. 
 * 
 * @category Time Series
 * @component
 */
const SingleTimeSeries = ({isBinary, xAxesLabelString, yAxesLabelString, dataSet, type}) => {

    const data = {
        labels: [],
        datasets: [
            {
                type: 'line',
                backgroundColor: "#C96D4288", // Options: 00555588 C96D4288 8E9D4DBB
                borderColor: "#4e73df",
                fill: true,
                borderWidth: 2,
                data: Array.isArray(dataSet) ? getChartData(dataSet, type): null,
                steppedLine: isBinary,
                pointRadius: 0
            }
        ]
    }

    const options = {
        responsive : true,
        maintainAspectRatio: false,
        title:{
            display:false,
        },
        legend:{
            display:false,
        },
        elements: {
            line: {
                tension: 0
            }
        },
        scales: {
		    yAxes: [{
                ticks: {
                    fontSize: 8
                },
		    	scaleLabel : {
		   		display: true,
		   		labelString: yAxesLabelString
		    	}
		    }],
		    xAxes: [{
                ticks: {
                    fontSize: 8
                },
                type: 'time',
                distribution: 'linear',
		    	scaleLabel : {
                    display: true,
                    labelString: xAxesLabelString
		    	}
		    }]
		}

    }

    return (
        <div className="w-100 h-100 p-2">
            <Line data={data} options={options}/>
        </div>
    )
}

const getChartData = (dataSet, type) => {
    const chartData = dataSet.map((data) => {
        return {
            x: data['time'],
            y: data[type] ?? data['value']
        }
    });
    return chartData;
}

SingleTimeSeries.propTypes = {
    /**
     * A flag to check whether the values are continuous values or
     * a two-state values like true and false.
     */
    isBinary: PropTypes.bool.isRequired,
    /**
     * The title of the x-axis of the time series.
     */
    xAxesLabelString: PropTypes.string.isRequired,
    /**
     * The title of the y-axis of the time series.
     */
    yAxesLabelString: PropTypes.string.isRequired,
    /**
     * The array of values to be displayed in the time series.
     */
    dataSet: PropTypes.array.isRequired,
    /**
     * The type of sensor value whose history is being displayed.
     */
    type: PropTypes.string.isRequired
}

export default SingleTimeSeries