import {CustomElement, defineElement, Host, ShadowDOM, State, Prop} from "../../packages/csx";
import {SvgLoader} from "./svg-loader";

@defineElement('svg-tester-two')
export class SvgTesterTwo extends CustomElement{
    // Constructor
    constructor(){
        super();
    }
    
    // Private properties
    states = [
        { inverted: true, invertedColor: "#F00"},
        { inverted: true, invertedColor: "#FF0"},
        { inverted: true, invertedColor: "#0FF"},
        { inverted: false},
        { inverted: true, invertedColor: "#0F0"},
    ];
    
    // Properties
    @State() state = this.states[0];
    
    // Handlers
    
    // CustomElement
    connectedCallback() {
        setInterval(()=>{
            // Moving state
            let curIndex = this.states.indexOf(this.state);
            this.state = this.states[(curIndex+1)>=this.states.length?0:curIndex+1];
        }, 1000);
        super.connectedCallback();
    }
    
    render(){
        // invertedColor instead of inverted-color is the only difference!
        return (
            <Host>
                <SvgLoader inverted={this.state.inverted} invertedColor={this.state.invertedColor} />
            </Host>
        );
    }
}