import { InputQL } from 'bulma-preact'
import { render, h, Component } from 'preact'

const items = [
    { name: 'Abcd', age: 14, sex: 'male' },
    { name: 'Hebellt', age: 24, sex: 'famale' },
    { name: 'Ellext', age: 34, sex: 'famale' },
    { name: 'Gogutt', age: 31, sex: 'male' },
    { name: 'Muttus', age: 27, sex: 'male' },
    { name: 'Fuss', age: 65, sex: 'famale' },
    { name: 'Fust', age: 34, sex: 'male' },
];
const columns = ['name', 'age', 'sex'];

class Demo extends Component {

    state = {
        filter: (item) => true
    }
    onChange = (valid, filter) => {
        if (valid && filter) {
            this.setState({filter})
        }
    }
    render () {
        const { filter } = this.state
        return <div className="content">
            <InputQL isUp items={items} columns={columns} onChange={this.onChange} style={{width: 400}}/>
            <ul style={{height: 400}}>
                {items.filter(filter).map(item => <li>{item.name} {item.age} {item.sex}</li>)}
            </ul>
        </div>
    }
}

render(<Demo />, container)