import {render} from "../../packages/csx";
import style from "./index.scss";
import {SvgLoader} from "./svg-loader";
import {SvgTester} from "./svg-tester";
import {SvgTesterTwo} from "./svg-tester-two";

let loader = render(<SvgLoader inverted="yes"/>);

document.body.appendChild(render(<style>{style}</style>));
document.body.appendChild(render(
    <div class="center-me">
        <h3>SVG Loader</h3>
        {loader}
        <h3>SVG Tester</h3>
        <SvgTester/>
        <h3>SVG Tester Two</h3>
        <SvgTesterTwo/>
    </div>
));


setTimeout(()=>{
    console.log("Uninverting");
    loader.removeAttribute("inverted");
    
    setTimeout(()=>{
        console.log("Inverting");
        loader.setAttribute("inverted", "ja");
    
        setTimeout(()=>{
            console.log("Stays inverted");
            loader.setAttribute("inverted", "");
    
            setTimeout(()=>{
                console.log("Inverted color");
                loader.setAttribute("inverted-color", "#0F0");
            }, 1000);
        }, 1000);
    }, 1000);
    
    
}, 1000);