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

@defineElement('svg-tester')
export class SvgTester 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(){
        return (
            <Host>
                <SvgLoader inverted={this.state.inverted} inverted-color={this.state.invertedColor} />
            </Host>
        );
    }
}