import React from 'react';

class BathroomComponent extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {doors:{}};
        this.settings = {};
    }
    componentDidMount()
    {
        this.getSettings();
    }
    async getSettings()
    {
        try
        {

            var url = window.location.origin + "/plugins/com.mattermost.bathroom/settings";
            var res = await fetch(url);
            this.settings = await res.json();
        }
        catch (e)
        {
            console.log(e);
            setTimeout(this.getSettings.bind(this), 5000);
            return;
        }

        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";
        try
        {
            var url = window.location.origin + "/plugins/com.mattermost.bathroom/status";
            var res = await fetch(url);
            var json = await res.json();
            this.setState({"doors":json});
        }
        catch (e)
        {
            console.log(e);
            setTimeout(this.updateDoors.bind(this), 3000);
        }
    }
    render()
    {
        if (!this.state.doors) return;
        var columns = 6;
        var keys = Object.keys(this.state.doors).sort();
        var width = Math.floor(100 / (columns + 1)) + "%";
        var widthPx = "23px";
        var elems = [];
        var row = [];
        var rows = 0;
        var IconImg = props => <img src={props.src} width="100%" style={{"padding":"2px"}} title={props.title}/>;
        var totalRows = Math.floor(keys.length / columns) + 1;
        for (var i = 0; i < keys.length /*(Math.floor(keys.length / 6) + 1) * 6*/; i++)
        {
            var img = null;
            if (i < keys.length)
            {
                var key = keys[i];
                var door = this.state.doors[key];
                var imgFile = this.settings[door + "_icon"];
                if (imgFile)
                {
                    img = <IconImg src={imgFile} title={this.settings.doors[key]}/>;
                    //img = <img src={imgFile} width="100%" style={{"padding":"2px"}} title={this.settings.doors[key]}/>
                }
            }
            row.push(<td width={widthPx}>{img}</td>);
            if (i % columns == columns - 1 || i == keys.length - 1)
            {
                if (rows == 0)
                {
                    row.unshift(
                        //<td rowspan={99} width={widthPx}><img src={this.settings.info_icon} width="100%" style={{"padding":"2px"}}/></td>
                        <td rowspan={totalRows} width={widthPx} style={{"color": this.props.theme.sidebarText, "padding-right":"5px"}}><IconImg src={this.settings.info_icon}/>:</td>
                    );
                }
                elems.push(<tr>{[...row]}</tr>);
                row.length = 0;
                rows++;
            }
        }
        return (
            //<table width="100%">
            <div style={{"text-align": "center", width:"100%", "padding-top":"10px"}}>
            <table style={{"margin-left":"auto", "margin-right":"auto", "border":"1px solid " + this.props.theme.sidebarText}}>
            {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());