import * as React from "react";
import { Button, Segment } from "semantic-ui-react";

import { injectState, MqttApiState } from "@app/state";
import { getRandomId } from "@common/utils";

class MessageTest extends React.Component<{ state: MqttApiState }> {
    render() {
        return (
            <Segment>
                <h2>Message Test</h2>
                <Button onClick={this.test1}>Add test message</Button>
                <Button onClick={this.test2}>Add test message w/ timeout</Button>
                <Button onClick={this.test3}>Add test message w/ content</Button>
            </Segment>
        );
    }

    private test1 = () => {
        this.props.state.uiStore.addMessage({
            info: true, content: "Test Message! " + getRandomId(), header: "Header to test message",
        });
    }

    private test2 = () => {
        this.props.state.uiStore.addMessage({
            warning: true, content: "Im gonna dissapear in 5 seconds " + getRandomId(),
            header: "Header to test message", timeout: 5000,
        });
    }

    private test3 = () => {
        this.props.state.uiStore.addMessage({
            color: "brown", content: <div className="ui segment">I Have crazy content!</div>,
            header: "Header to test message", timeout: 5000,
        });
    }
}

export default injectState(MessageTest);