const MamiPingIndicator = function(initialStrength) {
    const bars = [];
    const html = <div class="ping">
        <div class="ping-colour ping-colour-top"/>
        <div class="ping-colour ping-colour-bottom"/>
        <div class="ping-background"/>
        <div class="ping-antenna"/>
        <div class="ping-antenna-dot"/>
        <div class="ping-antenna-over ping-antenna-left"/>
        <div class="ping-antenna-over ping-antenna-right"/>
    </div>;

    for(let i = 1; i <= 3; ++i)
        bars.push(html.appendChild(<div class={`ping-bar ping-bar-${i}`}/>));

    const setStrength = strength => {
        if(typeof strength !== 'number')
            throw 'strength must be a number';

        for(const i in bars)
            bars[i].classList.toggle('ping-bar-on', i < strength);

        html.classList.toggle('ping-state-good', strength > 1);
        html.classList.toggle('ping-state-warn', strength === 1);
        html.classList.toggle('ping-state-poor', strength < 1);
    };

    if(typeof initialStrength !== 'number')
        initialStrength = bars.length;

    setStrength(initialStrength);

    return {
        getElement: () => html,
        setStrength: setStrength,
    };
};