import * as React from 'react'
import * as cx from 'classnames'
import { HoverableComponent } from '../common'
import { ButtonProps } from './interfaces'

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

export class Button extends HoverableComponent<ButtonProps> {

    public static defaultProps = {
        primary: true,
    }

    public render(): JSX.Element {
        const { id, disabled, onClick, children, type } = this.props
        return (
            <button
                id={id}
                type={type || 'button'}
                className={this.classNames()}
                style={this.styles()}
                disabled={disabled}
                onMouseEnter={this.onMouseEnter}
                onMouseLeave={this.onMouseLeave}
                onClick={onClick}>
                {children}
            </button>
        )
    }

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

    private classNames(): string {
        return cx(
            this.props.className,
            styles.container,
            {
                // colors are being handled through the theme
                // [styles.primary]: this.props.primary,
                [styles.disabled]: this.props.disabled,
                [styles.condensed]: this.props.condensed,
            },
        )
    }

}