text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import withTheme from '../../../Theme/withTheme';
  
  import ButtonBase from '../ButtonBase/ButtonBase';
  import color from 'color';
  import { Hoverable } from '../../../';
  
  class TextButton extends Component {
    static propTypes = {
      disabled: PropTypes.bool,
      color: PropTypes.string,
      textColor: PropTypes.string,
      rippleColor: PropTypes.string,
      theme: PropTypes.object,
      containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    };
  
    state = {
      stateBackgroundColor: null,
    };
  
    getButtonStyles() {
      const { theme } = this.props;
  
      const buttonStyles = [
        theme.textButton,
        {
          backgroundColor: this.getBackgroundColor(),
        },
      ];
      return buttonStyles;
    }
  
    getBackgroundColor = () => {
      const { color: userColor, disabled } = this.props;
      const { stateBackgroundColor } = this.state;
  
      let backgroundColor = userColor ? userColor : 'transparent';
  
      backgroundColor = stateBackgroundColor
        ? stateBackgroundColor
        : backgroundColor;
  
      return disabled ? 'transparent' : backgroundColor;
    };
  
    getRippleColor() {
      const { textColor, theme, rippleColor } = this.props;
  
      let implementedRippleColor = textColor ? textColor : theme.primary.main;
  
      return rippleColor ? rippleColor : implementedRippleColor;
    }
  
    getTextColor() {
      const { textColor, disabled, theme } = this.props;
  
      let implementedTextColor = textColor ? textColor : theme.primary.main;
  
      return disabled ? 'rgba(0, 0, 0, 0.26)' : implementedTextColor;
    }
  
    handleHover(toggle) {
      let implementedColor = toggle
        ? color(this.getTextColor())
            .alpha(0.12)
            .rgb()
            .string()
        : null;
  
      this.setState({ stateBackgroundColor: implementedColor });
    }
    render() {
      const { containerStyle, ...props } = this.props;
  
      return (
        <Hoverable
          onHoverIn={() => this.handleHover(true)}
          onHoverOut={() => this.handleHover(false)}
          style={containerStyle}>
          {() => (
            <ButtonBase
              typeRippleColor={this.getRippleColor()}
              typeTextColor={this.getTextColor()}
              typeButtonStyles={this.getButtonStyles()}
              {...props}
            />
          )}
        </Hoverable>
      );
    }
  }
  
  export default withTheme(TextButton);
  