export default newComponent(class {
    private seq
    async noAct() {
        this.seq = (await db.query("select * from seqs where name=$1",[ getCtx().ipAddress]))[0]
    }
    async dec() {
        this.seq = (await db.query("update seqs set num=num-1 where name=$1 returning *", [getCtx().ipAddress]))[0]
    }
    async inc() {
        this.seq = (await db.query("update seqs set num=num+1 where name=$1 returning *", [getCtx().ipAddress]))[0]
    }
    render() {
        return row([
            click('dec',iconButton('-')),
            fadeIn(this.seq.num.toString()),
            click('inc',iconButton('+')),
        ], { gap: 5 })
    }
})

export default newComponent(class {
    async render() {
        let list = await db.query("select * from todos where client_id=$1 order by id desc", [getCtx().ipAddress])
        let elements = [await Form()]
        for (let item of list) {
            elements.push(await Item(item.id, item))
        }
        return column(elements)
    }
})

let Form = newComponent(class {
    async add() {
        const { body, err, ipAddress } = getCtx()
        if (!body.content) {
            err('Please input some text')
        }
        let newTodo = (await db.query("insert into todos (client_id,content) values($1,$2) returning *", [ipAddress, body.content]))[0]
        return componentRes({
            after: fadeIn(slideDown(await Item(newTodo.id, newTodo))),
            html: this.render()
        })
    }
    render() {
        return form('add', [
            input({ name: 'content' }),
            formErrBox(),
            button('ADD')
        ])
    }
})

let Item = newComponent(class {
    constructor(private itemId, private item) { }
    async remove() {
        await db.query("delete from todos where id=$1 and client_id=$2", [this.itemId, getCtx().ipAddress])
        return ''
    }
    render() {
        return row([
            text(this.item.content ?? ''),
            click('remove',iconButton(icon("trash")))
        ], { gap: 10, mainAxis: "space-between", margin: 10 })
    }
})