import {render, CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
import style from "./index.scss";
import {TableComponent} from "./table-component";

@defineElement("table-tester")
class TableTester extends CustomElement{
    
    
    /**
     *
     * @type {({[headerRender]: (function(): string), render: (function(User): *), [size]: number})[]}
     */
    #columnDefinitions = [
        {
            headerRender: () => "Id",
            render: (u) => u.userId,
            size: 110
        },
        {
            headerRender: () => "Email",
            render: (u) => u.identity?.email,
        },
        {
            headerRender: () => "FirstName",
            render: (u) => u.identity?.firstName,
            size: 160
        },
        {
            headerRender: () => "LastName",
            render: (u) => u.identity?.lastName,
            size: 160
        },
        {
            headerRender: () => "...",
            render: (u) => {
                let d = new Date();
                return (<button onClick={(ev) => this.testMe(ev, u, d)}>test me</button>)
            },
            size: 110
        },
    ];
    
    @state()
    users = [];
    
    render(){
        
        return <TableComponent
                columns={this.#columnDefinitions}
                data={this.users}
        />
    }
    
    connectedCallback() {
        super.connectedCallback();
        
        setTimeout(()=>this.load(), 0);
        setTimeout(()=>this.load(), 50);
        setTimeout(()=>this.load(), 100);
        setTimeout(()=>this.load(), 150);
        setTimeout(()=>this.load(), 200);
        setTimeout(()=>this.load(), 250);
        
        this.interval = setInterval(()=>this.load(), 3000);
    }
    
    interval;
    disconnectedCallback() {
        super.disconnectedCallback();
        if(this.interval) {
            clearInterval(this.interval);
        }
    }
    
    load(){
        let users = [];
        
        let rndFirstNames = ['Loes', 'Johnny', 'Maria', 'Jezus', 'Philippe', 'Filip', 'Annie'];
        let rndLastNames = ['Peeters', 'Wachters', 'Jannsens', 'De Schaetzen', 'Becks', 'Konings', 'De Clerk'];
        
        for(let i = 0; i < 5; ++i){
            let first = rndFirstNames[Math.floor(rndFirstNames.length*Math.random())];
            let last = rndLastNames[Math.floor(rndLastNames.length*Math.random())];
            users.push({
                userId: (Math.random()*99999).toString(36).slice(-6).toUpperCase(),
                identity: {
                    firstName: first,
                    lastName: last,
                    email: `${first}.${last}@example.com`.toLocaleLowerCase()
                }
            })
        }
        
        this.users = users;
    }
    
    lastClear = new Date();
    testMe = (ev, u, d)=>{
        if((new Date()).getTime() - this.lastClear.getTime() > 20){
            console.log("\n\n");
            this.lastClear = new Date();
        }
        console.log("I should only show up once per click:", d.getTime());
    }
}

document.body.appendChild(render(<style>{style}</style>));
document.body.appendChild(render(<TableTester/>));