import { render, CustomElement, Host, defineElement, state, prop } from "@cerxes/csx";
import { testContainer } from "../utils/test-container";
import { nextAnimationFrame } from "../utils/next-animation-frame";

describe("Inheritance tests", () => {
    /**
     * Assert that a we can extend a getter/setter prop
     */
    test("Single inherited getter/setter-property", async () => {
        @defineElement('base-component')
        class BaseComponent extends CustomElement{
            @prop()
            set name(value){
                if(this.#name!==value){
                    this.#name = value;
                }
            }
            get name(){
                return this.#name;
            }
            #name;
            
            render(){
                return (
                    <div>
                        <label>Value is</label>
                        <div>{this.name}</div>
                    </div>
                )
            }
        }
        @defineElement('extended-component')
        class ExtendedComponent extends BaseComponent{
            @prop()
            set name(value){
                super.name = `Hi my name is ${value??""}`;
            }
            get name(){
                return super.name;
            }
        }
        
        let container = testContainer(
            render(<ExtendedComponent name={"Slim Shady"}/>)
        );
        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
        
        expect(
            container.innerHTML
        ).toBe([
            `<extended-component>`,
            `<div>`,
            `<label>Value is</label>`,
            `<div>Hi my name is Slim Shady</div>`,
            `</div>`,
            `</extended-component>`,
        ].join(''));
        
        document.body.removeChild(container);
    });
    
    
    /**
     * Assert that a we can extend a basic prop with a get/set
     * This test is expected to fail as long as decorators don't fully work as expected in babel
     * The problem showing up here is an initalizerDefineProperty being called in the base class, that replaces
     * the end descriptor of the function in the extended version
     */
    test("Single inherited basic-property component", async () => {
        @defineElement('base-component-2')
        class BaseComponent extends CustomElement{
            @prop()
            name;
            
            render(){
                return (
                    <div>
                        <label>Value is</label>
                        <div>{this.name}</div>
                    </div>
                )
            }
        }
        @defineElement('extended-component-2')
        class ExtendedComponent extends BaseComponent{
            @prop()
            set name(value){
                super.name = `Hi my name is ${value??""}`;
            }
            get name(){
                return super.name;
            }
        }
        
        let container = testContainer(
            render(<ExtendedComponent name={"John Johnson"}/>)
        );
        document.body.appendChild(container);// Components need to be added to the DOM or their connectecCallback will not be called
        
        expect(
            container.innerHTML
        ).toBe([
            `<extended-component-2>`,
            `<div>`,
            `<label>Value is</label>`,
            `<div>Hi my name is John Johnson</div>`,
            `</div>`,
            `</extended-component-2>`,
        ].join(''));
        
        document.body.removeChild(container);
    });
});