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

@Radium
export class PanelButton extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    icon: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
  }

  static style = {
    button: {
      borderWidth: sizeInfo.panelButtonBorderWidth,
      borderRadius:  sizeInfo.panelButtonBorderRadius,
      padding: '0 0 0 0',
      background: colorInfo.panelButtonBackground,
      verticalAlign: 'middle',
      outline: 'none',
      ':hover': {
        background: colorInfo.panelButtonBackgroundHover,
      },
      ':disabled': {
        background: colorInfo.panelDisabledButtonBackground,
      },
      ':active': {
        borderWidth: 0,
        background: colorInfo.panelButtonBackgroundActive,
      }
    }
  }

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

    return (
      <button type='button'
        style={[
          PanelButton.style.button, { height: sizeInfo.panelButton, width: sizeInfo.panelButton }
        ]}
        onClick={onClick}>
        <div style={{ position: 'relative' }}>
          <Icon
            name={icon} size={sizeInfo.panelButtonIcon}
            margin={sizeInfo.panelButtonIconMargin}
            style={{ position: 'relative', top: sizeInfo.panelButtonIconOffset }} />
          <span style={{
            position: 'absolute',
            top: sizeInfo.panelButtonTextOffset,
            left: 0,
            display: 'block',
            fontSize: fontInfo.size.huge,
            fontFamily: fontInfo.family,
            color: fontInfo.color.text,
            textAlign: 'center',
            width: '100%',
          }}>{text}</span>
        </div>
      </button>
    )
  }
}