import * as React from 'react'
import { connect } from 'react-redux'
import { DropdownProps, DropdownComponentProps } from '../interfaces'
import { mkNonPropagatingClick } from '../utils'
import { openDropdown, closeDropdown, toggleDropdown } from '../actions'
import { getDropdownByKey } from '../selectors'
import { Icon } from '.'
import { OpenableComponent } from './openable-component'

const styles = require('../../src/styles/components/dropdown.scss')

class _Dropdown extends OpenableComponent<DropdownComponentProps> {

    private button: HTMLButtonElement
    private closeOnClick: boolean

    public isActive() {
        return this.props.isToggled
    }

    public handleClose() {
        this.props.closeDropdown(this.props.name)
    }

    public handleListItemClick = () => {
        if (this.props.closeOnClick) {
            this.handleClose()
        }
    }

    public handleMouseOver = () => {
        if (this.props.openOnHover) this.props.openDropdown(this.props.name)
    }

    public handleMouseLeave = () => {
        if (this.props.openOnHover) this.props.closeDropdown(this.props.name)
    }

    public renderChildren() {
        const key = 0;
        const { closeDropdown, name, position, id, children } = this.props
        const childStyles: any = { width: this.props.listWidth }

        switch (position) {
            case 'left':
                childStyles.left = '0px'
                break;
            case 'right':
                childStyles.right = '0px'
                break;
            case 'center':
                childStyles.left = '50%' // @todo - figure out why the hell this is true
                break;
            default:
                childStyles.left = position // specify a custom position starting from the left
        }

        return (
            <ul id={id || `${name}-list`}
                className={styles.list}
                style={childStyles}
                onClick={this.handleListItemClick}>
                {children}
            </ul>
        )
    }

    public render() {
        const { toggleDropdown, openDropdown, name, isToggled, toggleIcon } = this.props
        /* tslint:disable:jsx-no-lambda */
        return (
            <div
                className={styles.container}
                ref={this.setContainerRef}
                onMouseLeave={this.handleMouseLeave}>
                <button
                    data-tooltip={this.props.tooltip || null}
                    id={`${name}-button`}
                    ref={(e: HTMLButtonElement) => this.button = e}
                    onClick={mkNonPropagatingClick(() => toggleDropdown(name))}
                    onMouseOver={this.handleMouseOver}>
                    {isToggled
                        ? (toggleIcon ? this.props.toggleIcon : this.props.icon)
                        : this.props.icon}
                </button>
                {isToggled ? this.renderChildren() : null}
            </div>
        )
        /* tslint:enable:jsx-no-lambda */
    }
}

const mapStateToProps = (state: any, ownProps: DropdownProps) => ({
    name: ownProps.name, // the key will be passed to the connected component
    isToggled: getDropdownByKey(state, ownProps.name),
    tooltip: ownProps.tooltip || null,
    closeOnClick: ownProps.closeOnClick === undefined ? true : ownProps.closeOnClick,
    openOnHover: ownProps.openOnHover || false,
    position: ownProps.position || 'left',
    icon: ownProps.icon || (<Icon icon="down-arrow" stroke="white" size={18} />), // default icon
    toggleIcon: ownProps.toggleIcon || null,
    listWidth: ownProps.listWidth || 180,
})

const mapDispatchToProps = {
    openDropdown,
    closeDropdown,
    toggleDropdown,
}

export const Dropdown = connect(mapStateToProps, mapDispatchToProps)(_Dropdown)