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

// TODO configurability, like inverted and not with props...

@defineElement('svg-loader')
export class SvgLoader extends CustomElement{
    // Constructor
    constructor(){
        super();
    }
    
    // Private properties
    
    // Properties
    @prop({reflect: true}) inverted;
    @prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000";
    
    // Handlers
    
    // CustomElement
    render(){
        return (
            <Host>
                <ShadowDOM>
                    <style>
                        { loaderComponentShadowStyle }
                    </style>
                    
                    <div class="loader-content">
                        <div class="spinner">
                            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke={(this.inverted??false)!==false? this.invertedColor : "#F00"}>
                                <g fill="none" fill-rule="evenodd">
                                    <g transform="translate(1 1)" stroke-width="2">
                                        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
                                        <path d="M36 18c0-9.94-8.06-18-18-18">
                                            <animateTransform
                                                attributeName="transform"
                                                type="rotate"
                                                from="0 18 18"
                                                to="360 18 18"
                                                dur="1s"
                                                repeatCount="indefinite"/>
                                        </path>
                                    </g>
                                </g>
                            </svg>
                        </div>
    
                        <slot>
                        </slot>
                    </div>
                </ShadowDOM>
            </Host>
        )
    }
}