import React from "react";


class PublicScreen extends React.Component {
    constructor(props) {
        super(props);

        this.getStyle = this.getStyle.bind(this);
    }


    getStyle() {
        const { width = 1920, height = 1080 } = this.props.style || {};

        const root = document.querySelector("-sharproot");
        const per = root.clientWidth / width;
        return {
            width: width,
            height: height,
            transformOrigin: "left top",
            transform: "scale(" + per + ")"
        };
    }


    render() {

        const { width = 1920, height = 1080 } = this.props.style || {};

        const childrenStyle = this.props.children.props.style || {};
        this.props.children.props.style = { height, width, ...childrenStyle };

        return <div ref={(elem) => { this.element = elem; }}
                    className="screen">
            {this.props.children}
        </div>;


    }

    componentDidMount() {


        // 
        const screen = this.element;
        const getStyle = this.getStyle;

        function adaptiveScreen() {
            const style = getStyle();
            for (let k in style) {
                screen.style[k] = style[k];
            }
        }

        let timeout = null;
        window.addEventListener("resize", () => {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                adaptiveScreen();
            }, 400);
        });
        adaptiveScreen();


    }


}

export default PublicScreen;

PublicScreen components

render() {

        const { width = 1920, height = 1080 } = this.props.style || {};

        const childrenStyle = this.props.children.props.style || {};
        this.props.children.props.style = { height, width, ...childrenStyle };

        return <div ref={(elem) => { this.element = elem; }}
                    className="screen">
            {this.props.children}
        </div>;


    }

call

render() {

        return <PublicScreen style={{ width: 1920, height: 1080 }} {...this.props}>
                <div
                    className={"fl_screen"}>
                    {/*  */}
                    <Availability
                        styleSet={"cpu_availability"}
                        availability = {this.state.cpuAvailability}
                    />

                </div>

            </PublicScreen>;
    }