import React from 'react';

import DropDownBase from './DropDownBase.js';

export default class DropDownMenu extends DropDownBase
{
    state = { items: this.props.items }

    render()
    {
        let sel = this.state.selectedItem;
        return <div ref="dd" className={'dropdown'+(this.state.visible ? ' visible' : '')} id={'dropdown-'+this.props.id}
            tabIndex="1" style={{ top: this.state.top, left: this.state.left }} onClick={this.myOnClick} onKeyDown={this.onKeyDown}
            onMouseOver={this.onMouseOver}>
            {this.state.items.map((i, index) => (i.split
                ? <div key={index} className="split"><i></i></div>
                : <div key={index} data-index={index} className={'item'+(i.i16 ? ' i16' : '')+(i.disabled ? ' disabled' : (sel == index ? ' over' : ''))}>
                    {i.hotkey ? <div className="hotkey">{i.hotkey}</div> : null}
                    {i.icon ? <img src={'icons/'+i.icon+'.png'} /> : null}
                    <span>{i.text}</span>
                </div>
            ))}
        </div>
    }

    onMouseOver = (ev) =>
    {
        let t = ev.target;
        while ((t && t != this.refs.dd) && (!t.className || t.className.substr(0, 4) != 'item'))
            t = t.parentNode;
        if (t && t != this.refs.dd)
            this.setState({ selectedItem: parseInt(t.getAttribute('data-index')) });
    }

    onKeyDown = (ev) =>
    {
        if (ev.keyCode == 40 || ev.keyCode == 38)
        {
            let a = ev.keyCode == 40 ? 1 : this.state.items.length-1;
            let sel = this.state.selectedItem;
            do
            {
                sel = ((sel+a) % this.state.items.length);
            }
            while (this.state.items[sel].split && sel != this.state.selectedItem);
            this.setState({ selectedItem: sel });
        }
        else if (ev.keyCode == 10 || ev.keyCode == 13)
            this.clickItem();
        ev.preventDefault();
        ev.stopPropagation();
    }

    clickItem = (ev) =>
    {
    }

    myOnClick = (ev) =>
    {
        if (ev.target.getAttribute('data-index'))
            this.clickItem();
        this.onClick(ev);
    }
}