import React from 'react';

class BathroomComponent extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {doors:{}};
    }
    componentDidMount()
    {
        Registry.registerWebSocketEventHandler("custom_com.mattermost.bathroom_updated", this.updateDoors.bind(this));
        this.updateDoors();
    }
    componentWillUnmount()
    {
        Registry.unregisterWebSocketEventHandler("custom_com.mattermost.bathroom_updated");
    }
    async updateDoors(msg)
    {
        var url = Store.getState().entities.general.config.SiteURL + "/plugins/com.mattermost.bathroom/status";
        var res = await fetch(url);
        var json = await res.json();
        this.setState({"doors":json});
    }
    render()
    {
        if (!this.state.doors) return;
        var columns = 6;
        var keys = Object.keys(this.state.doors).sort();
        var width = (Math.floor(100 / columns)) + "%";
        var widthPx = "23px";
        var elems = [];
        var row = [];
        for (var i = 0; i < keys.length /*(Math.floor(keys.length / 6) + 1) * 6*/; i++)
        {
            var img = null;
            if (i < keys.length)
            {
                var door = this.state.doors[keys[i]];
                var imgFile = null;
                switch (door)
                {
                    default:
                    case "unknown":
                        imgFile = "/static/emoji/2753.png";
                        break;
                    case "open":
                        imgFile = "/static/emoji/1f6bd.png";
                        break;
                    case "closed":
                        imgFile = "/static/emoji/26d4-fe0f.png";
                        break;
                }
                img = <img src={imgFile} width="100%" style={{"padding":"2px"}}/>
            }
            row.push(<td width={widthPx}>{img}</td>);
            if (i % columns == columns - 1 || i == keys.length - 1)
            {
                elems.push(<React.Fragment>{[...row]}</React.Fragment>);
                row.length = 0;
            }
        }
        return (
            //<table width="100%">
            <div style={{"text-align": "center", width:"100%", "padding-top":"10px"}}>
            <table style={{"margin-left":"auto", "margin-right":"auto"}}>
            {elems}
            </table>
            </div>
        );
    }
}

var Registry = null;
var Store = null;

class BathroomMonitorPlugin
{
    initialize(registry, store)
    {
        Registry = registry;
        Store = store;
        registry.registerLeftSidebarHeaderComponent(BathroomComponent);
    }
}

window.registerPlugin('com.mattermost.bathroom', new BathroomMonitorPlugin());