import React, { Component } from 'react';
import styled from 'styled-components';
import * as palette from '../../theme/constants.js';
import * as themes from '../../theme/theme.js';
import PropTypes from 'prop-types';
const buttonSize = {
    xsmall:  {
        padding: "4px 24px",
        height: "auto",
        'font-size': '14px',
        iconSize: "12px",
        paddingIcon: "4px 24px"
    },
    small: {
        padding: "6px 24px",
        'font-size': '16px',
        height: "32px",
        iconSize: "16px",
        paddingIcon: "4px 24px"
    },
    medium: {
        padding: "8px 24px",
        'font-size': '16px',
        height: "36px",
        iconSize: "20px",
        paddingIcon: "4px 24px"
    },
    large: {
        padding: "12px 24px",
        'font-size': '16px',
        height: "44px",
        iconSize: "20px",
        paddingIcon: "4px 24px"
    }

};

const Btn = styled.button`
     ${palette.BASE_FONT_FAMILY};
     width:             ${props => props.fullwidth  ? '100%' : 'auto'};
     min-width: 48px;
     height:            ${props => props.size ? buttonSize[props.size].height : buttonSize['small'].height };
     padding:           ${props => props.size && props.icon ? buttonSize[props.size].paddingIcon : buttonSize[props.size].padding};
     border-radius:     2px;
     background:        ${props => props.nature ? themes[props.theme].buttons[props.nature].background : themes[props.theme].buttons['default'].background};
     color:             ${props => props.nature ? themes[props.theme].buttons[props.nature].color : themes[props.theme].buttons['default'].color};
     border:            none;
     border:            ${props => props.nature ? themes[props.theme].buttons[props.nature].border : 'none'};
     text-align:        center;
     font-size:         ${props => props.size === 'xsmall' ? buttonSize[props.size]['font-size'] : '14px' };
     line-height:       1;
     box-sizing: border-box;
     cursor: pointer;
     transition: all .1s ease-in-out;
     box-shadow:  ${props => props.nature && !props.group ? themes[props.theme].buttons[props.nature].boxShadow: themes[props.theme].buttons['default'].boxShadow};
     &: hover {
        box-shadow:  ${props => props.nature && !props.group ? themes[props.theme].buttons[props.nature].hover.boxShadow: themes[props.theme].buttons['default'].hover.boxShadow};
        background: ${props => props.nature ? themes[props.theme].buttons[props.nature].hover.background : themes[props.theme].buttons['default'].hover.background};
    }
    &: focus {
        outline: none;
        box-shadow:  ${props => props.nature && !props.group ? themes[props.theme].buttons[props.nature].clicked.boxShadow: themes[props.theme].buttons['default'].clicked.boxShadow};
        background: ${props => props.nature ? themes[props.theme].buttons[props.nature].clicked.background : themes[props.theme].buttons['default'].clicked.background};
    }
    &:disabled,
    button[disabled]{
        box-shadow:  ${props => props.nature && !props.group ? themes[props.theme].buttons[props.nature].disabled.boxShadow: themes[props.theme].buttons['default'].disabled.boxShadow};
        background: ${props => props.nature ? themes[props.theme].buttons[props.nature].disabled.background : themes[props.theme].buttons['default'].disabled.background};
        cursor: auto;
        color:  ${props => props.nature ? themes[props.theme].buttons[props.nature].disabled.color : themes[props.theme].buttons['default'].disabled.color};

    }
    & i {
      font-size: ${props => props.size ? buttonSize[props.size].iconSize : buttonSize['small'].iconSize};
      line-height: 1;
    }
`;

class Button extends Component {
    constructor(props) {
        super(props);
        this.onClick = this.callAction.bind(this);

    }
    callAction(params) {
        if(this.props.action) this.props.action(params);
    }
    render() {
        return (
            <Btn size={this.props.size}
                 icon={this.props.icon}
                 nature={this.props.nature}
                 fullwidth={this.props.fullwidth}
                 ref={this.focusInput}
                 theme={this.props.theme} onClick={this.props.action} group={this.props.group}  autoFocus={this.props.autoFocus}
                 disabled= {this.props.isDisabled === true ? this.props.isDisabled : false}>
                  {this.props.icon ?
                  <i className={`icon-${this.props.icon}`} style={{display:'inline', marginRight: '8px', verticalAlign: 'middle' }}></i>
                  : ''}
                {this.props.title}
            </Btn>
        );
    }
};

Button.propTypes = {
    /** the title of the button */
    title: PropTypes.string,
    /** color/style of the button */
    nature: PropTypes.oneOf(['primary', 'default', 'secondary']),
    /** size of the button */
    size: PropTypes.oneOf(['xsmall','small', 'medium', 'large']),
    /** Callback function*/
    action: PropTypes.func,
    /** Theme of the button*/
    theme: PropTypes.string,
    /** Full button width according to parent container */
    fullwidth: PropTypes.bool,
    group: PropTypes.bool,
    autoFocus: PropTypes.bool,
    isDisabled: PropTypes.bool,
    icon: PropTypes.string,

};

Button.defaultProps = {
    nature: 'default',
    theme:'themeLight',
    size: 'small'
};

export default Button;