import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import PropTypes from 'prop-types';

const themes = {
    'prime-panel-primary' : {
        backgroundColor : '#dd712f',
        labelColor : '#ffffff'
    },
    'prime-panel-secondary' : {
        backgroundColor : '#ffffff',
        labelColor : '#dd712f'
    }
}

export default class Button extends React.Component {

    constructor() {
        super();
        this.buttonTypeCreationMap = {
            'label': 'createLabelButton',
            'icon': 'createIconButton',
            'label-icon': 'createLabelIconButton'
        }
    }

    createButton() {
        this.backgroundColor = this.props.themeType ? themes[this.props.themeType].backgroundColor : this.props.backgroundColor
        this.labelColor = this.props.themeType ? themes[this.props.themeType].labelColor : this.props.labelColor
        var buttonCreation = this.buttonTypeCreationMap[this.props.buttonType];
        return this[buttonCreation].call(this);
    }

    createLabelButton() {
        return (
            <RaisedButton
                style={this.props.style}
                labelStyle={{...{'textTransform' : 'none'},...this.props.labelStyle}}
                className={this.props.appendClassName}
                backgroundColor={this.backgroundColor}
                disabledBackgroundColor={this.props.disabledBackgroundColor}
                disabledLabelColor={this.props.disabledLabelColor}
                disabled={this.props.disabled}
                label={this.props.label}
                primary={this.props.primary}
                labelColor={this.labelColor}
                onClick={this.props.onClick}
            />
        );
    }

    createIcon() {
        if (this.props.icon) {
            return (
                <i className="material-icons">{this.props.icon}</i>
            );
        } 
        else if(this.props.materialIcon) {
            return (
                <i className="material-icons">{this.props.materialIcon}</i>
            );
        } 
        else {
            return (
                <img title={this.props.title} src={this.props.iconSrc}/>
            );
        }
    }

    createIconButton() {
        if (this.props.icon) {
            return (
                <RaisedButton
                    color={this.labelColor}
                    backgroundColor={this.backgroundColor}
                    style={this.props.style}
                    className={this.props.appendClassName}
                    primary={this.props.primary}
                    icon={this.createIcon()}
                    onClick={this.props.onClick}
                    disabled={this.props.disabled}
                />
            );
        } else {
            const clickStyle = Object.assign({
                cursor: 'pointer'
            }, this.props.style);
            return (
                <div style={clickStyle} onClick={this.props.onClick}>
                    {this.createIcon()}
                </div>
            );
        }
    }

    createLabelIconButton() {
        return (
            <RaisedButton
                style={this.props.style}
                labelStyle={{...{'textTransform' : 'none'},...this.props.labelStyle}}
                className={this.props.appendClassName}
                icon={this.createIcon()}
                labelPosition={this.props.labelPosition || 'after'}
                label={this.props.label}
                primary={this.props.primary}
                onClick={this.props.onClick}
                labelColor={this.labelColor}
                backgroundColor={this.backgroundColor}
            />
        );
    }

    render() {
        return (
            <div style={this.props.blockStyle} className={`${this.props.className?this.props.className:''}`}>
                {this.createButton()}
            </div>
        );
    }
}

Button.PropTypes = {
    buttonType: PropTypes.oneOf(['label','icon','label-icon']),
    themeType: PropTypes.oneOf(['prime-panel-primary','prime-panel-secondary']),
    label: PropTypes.string,
    icon: PropTypes.string,
    iconSrc: PropTypes.string,
    onClick: PropTypes.func,
    blockStyle: PropTypes.object,
    backgroundColor: PropTypes.string,
    title: PropTypes.string
}