import React from 'react';

import DropDownBase from './DropDownBase.js';

export default class DropDownButton extends React.PureComponent
{
    state = { pressed: false, checked: false }

    componentDidUpdate(prevProps, prevState)
    {
        if (prevProps.hidden && !this.props.hidden &&
            DropDownBase.instances[this.props.dropdownId].isVisible())
        {
            DropDownBase.instances[this.props.dropdownId].showAt(this.refs.btn, this.unpress);
        }
    }

    render()
    {
        return <a ref="btn" title={(this.state.checked ? this.props.checkedTitle : null) || this.props.title} onClick={this.onClickButton}
            className={'button '+(this.props.dropdownId ? 'show-dropdown ' : '')+(this.state.checked ? 'checked ' : '')+
            (this.props.hidden ? 'hidden ' : '')+
            (this.state.pressed ? 'pressed ' : '')+(this.props.className || '')}>
            {this.props.icon ? <img src={'icons/'+(this.state.checked && this.props.checkedIcon || this.props.icon)+'.png'} /> : null}
            {this.state.checked && this.props.checkedText || this.props.text || null}
            {this.props.dropdownId ? <span className="down" onClick={this.onClickDown}></span> : null}
        </a>
    }

    toggle = () =>
    {
        if (!this.state.pressed)
        {
            DropDownBase.hideAll();
            DropDownBase.instances[this.props.dropdownId].showAt(this.refs.btn, this.unpress);
        }
        else
            DropDownBase.instances[this.props.dropdownId].hide();
        this.setState({ pressed: !this.state.pressed });
    }

    unpress = () =>
    {
        this.setState({ pressed: false });
    }

    onClickButton = (ev) =>
    {
        if (this.props.whole || this.props.checkable && this.state.pressed)
            this.toggle();
        if (this.props.checkable)
        {
            this.setState({ checked: !this.state.checked });
            if (this.props.onClick)
                this.props.onClick(this.state.checked);
        }
        else if (this.props.onClick)
            this.props.onClick();
        ev.stopPropagation();
    }

    onClickDown = (ev) =>
    {
        this.toggle();
        ev.stopPropagation();
    }
}