import {Component} from "react";
import {PropTypes} from "prop-types";

export class ServiceTile extends Component {

    // componentDidMount() {
    //     this.interval = setInterval(this.fetchStatus, 10000);
    // }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    fetchStatus() {
        fetch(this.props.apiURL + "/status/" + this.props.service)
            .then(response => {
                this.setState({isUp: response.status === 200});
            });
    }

    render() {
        const {isUp,service, statusCode, checkedAt} = this.props;
        return (
            <div className={`ServiceTile ${isUp ? "up" : "down"}`}>
                <h3>{service}</h3>
                <p className={"status"}>
                    Status: <strong>{isUp ? '🟢 UP' : '🔴 DOWN'}</strong>
                </p>
                <p>HTTP Code: {statusCode || 'N/A'}</p>
                <p className="timestamp">
                    Checked at: {checkedAt || 'N/A'}
                </p>
            </div>
        )
    }
}

ServiceTile.propTypes = {
    service: PropTypes.string,
    statusCode: PropTypes.number,
    checkedAt: PropTypes.string,
    apiURL: PropTypes.string,
    isUp: PropTypes.bool
}