import React from 'react';
import ReactDOM from 'react-dom';

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

        this.state = {
            sec: 0,
        }
    }

    componentDidMount() {
        this.id = setInterval(() => {

            this.setState({
                sec: this.state.sec + 1,
            }, () => {
                let stop = this.props.text.length -1;
                if(this.props.reversed === true) {
                    stop += 1;
                }

                if(this.state.sec === stop) {
                    clearInterval(this.id);
                }
            });

        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.id);
    }

    render() {
        if(this.props.reversed === true) {
            return (
                <h1>
                    {this.state.sec},
                    {this.props.text.substr(0, this.props.text.length -this.state.sec)}
                </h1>
            )
        }

        return (
            <h1>{this.state.sec}, {this.props.text.substr(0, this.state.sec +1)}</h1>
        )
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <TextTyper text="Witaj!" />
                <TextTyper text="Witaj!" reversed={true} />
            </div>
        )
    }
}

document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );
});