import React, {Component} from "react";
import {VBox} from "appy-comps";

const menuStyle = {
    border: '1px solid black',
    padding: '0.5em 0',
    borderRadius: '0.5em',
    backgroundColor:'white'

};

const menuItemStyle = {
    border: '0px solid blue',
    padding: '0.25em'
};

const SelectItemTemplate = (props) => {
    let override = {
        color:'black',
        backgroundColor:'white'
    };
    if(props.highlighted) {
        override.color = 'white';
        override.backgroundColor = "#4466ff";
    }
    if(props.item.disabled) {
        override.color = 'black';
        override.backgroundColor = 'gray';
    }
    var text = props.item.toString();
    if(props.template) {
        text = props.template(props.item);
    }
    return <div style={{ ...menuItemStyle,  ...override}}
    >{text}</div>
};

export default class SelectMenu extends Component {
    constructor(props) {
        super(props);

        this.state = {
            highlightedIndex: 0,
            items:[],
        };

        this.mounted = false;
        this.updateItems = (data) => {
            if(!this.mounted) return;
            this.setState({items:data});
        };
        props.query.on('update', this.updateItems);
        props.query.on('execute', this.updateItems);



        this.navDown = () => {
            let index = this.state.highlightedIndex;
            while(true) {
                index = (index + 1) % this.state.items.length;
                var item = this.getItem(index);
                if(item.disabled) continue;
                break;
            }
            this.setState({highlightedIndex:index});
        };
        this.navUp = () => {
            let index = this.state.highlightedIndex;
            while(true) {
                index = (index -1 );
                if(index < 0) index = this.state.items.length -1;
                var item = this.getItem(index);
                if(item.disabled) continue;
                break;
            }
            this.setState({highlightedIndex: index});
        };
        this.choose = () => {
            const item = this.getItem(this.state.highlightedIndex);
            if(this.props.onSelect) this.props.onSelect(item,this.state.highlightedIndex);
        };
        this.documentKeydown = (e) => {
            if(e.keyCode === 40) {
                e.stopPropagation();
                e.preventDefault();
                this.navDown()
            }
            if(e.keyCode=== 38) {
                e.stopPropagation();
                e.preventDefault();
                this.navUp()
            }
            if(e.keyCode === 13) {
                this.choose();
            }
        };
    }
    getItem(index) {
        return this.state.items[index];
    }

    componentDidMount() {
        document.addEventListener('keydown',this.documentKeydown,true);
        this.mounted = true;
        this.props.query.execute();
    }
    componentWillUnmount() {
        document.removeEventListener('keydown',this.documentKeydown,true);
        this.mounted = false;
    }

    render() {
        return <div style={menuStyle} ref="div">
            {this.state.items.map((it,i)=>{
                return <SelectItemTemplate key={i} item={it} highlighted={this.state.highlightedIndex === i} template={this.props.template}/>
            })}
        </div>
    }
}
@@ -36,41 +36,8 @@
 ct%22;
-%0Aimport %7BVBox%7D from %22appy-comps%22;
 %0A%0Aco
@@ -768,16 +768,56 @@
 erride%7D%7D
+ onClick=%7B()=%3Eprops.onClick(props.item)%7D
 %0A    %3E%7Bt
@@ -2689,24 +2689,174 @@
 %0A        %7D;%0A
+        this.clickChoose = (item) =%3E %7B%0A            console.log(%22item%22,item);%0A            if(this.props.onSelect) this.props.onSelect(item);%0A        %7D%0A
     %7D%0A    ge
@@ -3474,16 +3474,103 @@
 emplate%7D
+%0A                                           onClick=%7Bthis.clickChoose%7D%0A                
 /%3E%0A     

add click to select