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: () => "Up",
            render: (u) => {
                let d = new Date();
                return (<button onClick={(ev) => this.moveUp(ev, u, d)}>Up</button>)
            },
            size: 110
        },
        {
            headerRender: () => "Down",
            render: (u) => {
                let d = new Date();
                return (<button onClick={(ev) => this.moveDown(ev, u, d)}>Down</button>)
            },
            size: 110
        },
    ];
    
    @state()
    users = [];
    
    rowKey = (user)=>user.userId;
    cellRef = (user, colIdx, el)=>user.cells[colIdx]=el;
    
    render(){
        
        return <TableComponent
                columns={this.#columnDefinitions}
                data={this.users}
                rowKey={this.rowKey}
                cellRef={this.cellRef}
        />
    }
    
    connectedCallback() {
        super.connectedCallback();
        
        setTimeout(()=>this.load(), 0);
    }
    
    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 < 10; ++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()
                },
                cells: []
            })
        }
        
        this.users = users;
    }
    
    lastClear = new Date();
    
    moveUp = (ev, u, d)=>{
        let data = this.users.slice();
        let indexOf = this.users.indexOf(u);
    
        if(indexOf>0) {
            let [before, after] = data.splice(indexOf - 1, 2);
            data.splice(indexOf - 1, 0, after, before);
            console.log(data.map((u,index)=>this.rowKey(u,index)))
            this.users = data;
        }
        console.log(this.users);
    }
    
    moveDown = (ev, u, d)=>{
        let data = this.users.slice();
        let indexOf = this.users.indexOf(u);
        
        if(indexOf<(this.users.length-1)) {
            let [before, after] = data.splice(indexOf, 2);
            data.splice(indexOf, 0, after, before);
            console.log(data.map((u,index)=>this.rowKey(u,index)));
            this.users = data;
        }
        console.log(this.users);
    }
}

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