import { Component, h } from "preact";
import { useEffect, useState } from "preact/hooks";
import * as style from "./style.css";

export interface DatasetProps {
    name: string,
}

export interface Datapoint {
    id: number,
    devicename: string,
    value: number,
    timestamp: string,
}

export interface DatasetState {
    data: Datapoint[],
}

class Dataset extends Component<DatasetProps, DatasetState> {
    constructor(){
        super();
        this.state = { data: [] };
    }

    async componentDidMount() {
        var devicesResponse = await fetch(`/api/device/${this.props.name}`);
        this.setState({ data: await devicesResponse.json() as Datapoint[] })
    }

  // Lifecycle: Called just before our component will be destroyed
  componentWillUnmount() {
    // stop when not renderable
  }

  render() {
      var deviceLinks = this.state.data.map((d) => <div>{d.devicename},{d.value},{d.timestamp}</div>)
    return <div class={style.profile}>{this.props.name}<span>{deviceLinks}</span></div>;
  }
}

export default Dataset;