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

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

export class SaveButton extends HoverableComponent<SaveButtonProps> {

    public static defaultProps = {
        icon: 'plus',
        color: 'primary',
    }

    public render() {
        // console.log('RENDER SAVE BUTTON', this.props)
        const { icon, children, onClick, className, id } = this.props
        return (
            <button
                id={id}
                onMouseEnter={this.onMouseEnter}
                onMouseLeave={this.onMouseLeave}
                type="submit"
                onClick={onClick}
                style={this.styles()}
                className={cx(className, styles.container)}>

                <Icon icon={icon} fill={this.color()} />

                <div style={this.textStyles()} className={styles.text}>
                    {children}
                </div>

            </button>
        )
    }

    public color = () => {
        const colorFunc = (this as any)[(this.props as any).color] || this.primary

        return this.state.hover
            ? colorFunc(700)
            : colorFunc()
     }
    private textStyles = () => ({
        color: this.color(),
    })
}