/*global Module*/
"use strict";
import React from 'react';

const styles = {
    content: {
        position: 'absolute',
        margin: '10px 10px 10px 10px',
        height: '100%',
        verticalAlign: 'sub',
        textAlign: 'justify', 
        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace", 
        webkitUserSelect : 'none', 
        mozUserSelect: 'none', 
        msUserSelect: 'none', 
        userSelect: 'none'
    }
}

/**
 * Component for assessing genotype matching.
 */
class TextViewer extends React.Component {
    /**
     * Basic constructor.
     * @param {any} props properties of Component
     */
    constructor(props) {
        super(props);
        this.props = props;
    }
     
    render() {
        return (
            <div style={styles.content}>
                Wypełnij ankietę (na dole strony). Następnie dopasuj (nałóż na siebie) oba modele jak najlepiej, wedle własnej opinii, przesuwając je i obracając za pomocą myszy. Potem po prawej stronie okienka przypisz każdy wierzchołek jednego modelu (cyferki) najlepiej odpowiadającemu (wedle własnej opinii) wierzchołkowi drugiego modelu (literki). Klawisze 't' i 'r' przełączają pomiędzy translacją (przesuwaniem) i rotacją.
            </div>
        );
    }
}                          

export default TextViewer;