import * as React from 'react'
import * as cx from 'classnames'
import {
    Icon,
    HoverableComponent,
    StylableComponentProps,
} from 'cosmoui'

const styles = require('./navbar.scss')

interface IconActionProps extends StylableComponentProps {
    icon: string
    size?: number
    disabled?: boolean
    onClick?: (e: React.SyntheticEvent<any>) => any
}

export class IconAction extends HoverableComponent<IconActionProps> {

    public static defaultProps = {
        size: 24,
    }

    public render(): JSX.Element {
        const { onClick, icon } = this.props
        return (
            <div
                style={this.styles()}
                className={this.classNames()}
                onMouseEnter={this.onMouseEnter}
                onMouseLeave={this.onMouseLeave}
                onClick={onClick}>
                <Icon
                    icon={icon}
                    primary={true}
                    size={this.props.size} />
            </div>
        )
    }

    public styles() {
        return {
            backgroundColor: this.color(),
            color: this.gray(800),
            ...this.props.style,
        }
    }

    public color = () =>
        this.state.hover && !this.props.disabled ? 'white' : 'transparent'

    private classNames(): string {
        return cx(
            this.props.className,
            styles.navAction,
            {
                [styles.disabled]: this.props.disabled,
                [styles.hover]: this.state.hover && !this.props.disabled,
            },
        )
    }

}