/*global Module*/
"use strict";
import React from 'react';
import TitlePanel from './viewskeleton/titlepanel';
import WidgetsContainer from './viewskeleton/widgetscontainer';
import SimilViewer from './widgets/similviewer';

const styles = {
    contentHeaderMenuLink: {
        textDecoration: 'none',
        color: 'white',
        padding: 8,
    },
    content: {
        padding: '16px',
    },
    sidebarLink: {
        display: 'block',
        padding: '16px 0px',
        color: 'gray',
        textDecoration: 'none',
    },
    divider: {
        margin: '8px 0',
        height: 1,
        backgroundColor: 'gray',
    },
};

//const mql = window.matchMedia('(min-width: 800px)');

/**
 * Main class running Framsticks.JS page.
 */
class MainView extends React.Component {
    /**
     * Basic constructor holding informations about sidebar states
     * @param {any} props component properties
     */
    constructor(props) {
        super(props);
        this.onLayoutChange = this.onLayoutChange.bind(this);

        window.genetics = new Module.PreconfiguredGenetics();
        this.layout = [
            {name:'0,similviewer', x: 0, y: 0, w: 12, h: 4}
        ];

        this.container = <WidgetsContainer onRef={ref => (this.widgetscontainer = ref)} onLayoutChange={this.onLayoutChange} />;

        this.state = {
            parametersmodal: false
        };
    }

    /** 
     * Uses default layout.
    */
    componentDidMount() {
        this.useLayout(this.layout);
    }

    /** 
     * Calls resize event in order to properly set layout
    */
    componentDidUpdate() {
        window.dispatchEvent(new Event('resize'));
    }

    /**
     * Stores layout, for LocalStorage layout saving
     * @param {any} layout layout to be saved
     */
    onLayoutChange(layout) {
        let newlayout = [];
        for (let i = 0; i < layout.length; i++) {
            newlayout.push({name: layout[i].i, x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
        }
    }
    /**
     * Passes layout to widgetscontainer.
     * @param {any} layout layout to be used
     */
    useLayout(layout) {
        let items = [];
        for (let i = 0; i < layout.length; i++) {
            let name = layout[i].name.split(',')[1];
            switch (name) {
                case 'similviewer':
                    items.push({content: <SimilViewer/>, i: "" + i + 'similviewer',
                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
                    break;
            }
        }
        this.widgetscontainer.addMultipleItems(items);
    }

    /**
     * Render function.
     * @returns {JSX.Element} main page of Framsticks.JS
     */
    render() {
        
        const contentHeader = (
            <span>   
                <span style={{marginLeft: '20px'}}>Matching in 3D</span> 
            </span>
        );
        
        return (
                <TitlePanel title={contentHeader}>
                    <div style={styles.content}>
                        {this.container}
                    </div>
                </TitlePanel>
        );
    }
}

export default MainView;