import 'normalize.css';
import React from 'react';
import PropTypes from 'prop-types';
import {render} from 'react-dom';
import {message} from 'antd';
import 'antd/dist/antd.css'

import AntProgress from './progress';

{% for component in components %}
import {{ component.component }} from './{{ component.module }}';
{% endfor %}

export default class View{{ uuid }} extends React.Component {
    render() {
        var socket = this.props.socket;
        return (
            <div style={{ '{{' }}display: 'grid',
                    gridTemplateColumns: '{{ columns|join(' ') }}',
                    gridTemplateRows: '{{ rows|join(' ') }}',
                    gridColumnGap: '{{ column_gap }}',
                    gridRowGap: '{{ row_gap }}',
                    width: '100%', height: '100%',
                    minHeight: '100vh', maxHeight: '100%',
                    minWidth: '100vw', maxWidth: '100%'{{ '}}' }}>

                {% if sidebar %}
                <div style={{ '{{' }}padding: '7px', backgroundColor: '{{background_color}}',
                        gridColumn: '1 / 2',
                        gridRow: '1 / -1'
                        {{ '}}' }}>

                    {% for control in controls %}
                        {% if control.caption is not none %}
                            <div style={{ '{{' }}paddingBottom: '3px'{{ '}}' }}>
                            {{ control.caption }}
                            </div>
                        {% endif %}

                        <div style={{ '{{' }}paddingBottom: '7px'{{ '}}' }}>
                        {{ control.instantiate }}
                        </div>
                    {% endfor %}
                </div>
                {% endif %}

                {% for widget, span in widgets %}
                <div style={{ '{{' }}
                        gridColumn: '{{ span.column_start + sidebar }} / {{ span.column_end + sidebar }}',
                        gridRow: '{{ span.row_start }} / {{ span.row_end }}',
                        position: 'relative'
                        {{ '}}' }}>
                    {{ widget }}
                </div>
                {% endfor %}
            </div>
        );
    }
}

View{{ uuid }}.propTypes = {
    socket: PropTypes.object.isRequired,
}

// vim: set ft=javascript.jsx:
