import Radium from "radium"
import PropTypes from "prop-types"
import React, { Component } from "react"
import { colorInfo, sizeInfo } from "./style"
import { Text, Icon } from "."

@Radium
export class FormIconButton extends Component {
  static propTypes = {
    visible: PropTypes.bool,
    // disabled: PropTypes.bool,
    icon: PropTypes.string,
    onClick: PropTypes.func,
  }

  static defaultProps = {
    visible: true,
    disabled: false,
    width: sizeInfo.buttonWidth,
  }

  static style = {
    icon: {
      borderWidth: 0,
      borderRadius: sizeInfo.formButtonIconBorderRadius,
      background: colorInfo.buttonBackgroundHover,
      outline: "none",
      padding: sizeInfo.formButtonIconPadding,
      ":hover": {
        background: colorInfo.buttonBackground,
      },
      ":disabled": {
        background: colorInfo.buttonDisabledBackground,
      },
      ":active": {
        background: colorInfo.buttonBackgroundActive,
      },
    },
  }

  render() {
    const { icon, visible } = this.props

    if (!visible) {
      return null
    }

    return (
      <div>
        <Text>&nbsp;</Text>
        <br />
        <Icon
          name={icon}
          size={sizeInfo.formButtonIcon}
          margin={sizeInfo.formButtonIconMargin}
          style={FormIconButton.style.icon}
          onClick={this.props.onClick}
        />
      </div>
    )
  }
}