import React from 'react'
import { ButtonProps, ButtonState } from 'atoms/Button'
import { StyledToggleButton } from './styled'

class ToggleButton extends React.PureComponent<ButtonProps, ButtonState> {
  static defaultProps = {
    breedType: '',
    text: '',
    role: 'button',
    'aria-label': 'button',
    'aria-pressed': false,
    width: '75px',
    height: '40px',
  }

  /**
   * @todo invalid @name boolean
   */
  state = {
    transitionValue: true,
  }
  handleClick = event => {
    this.setState({
      transitionValue: !this.state.transitionValue,
    })
  }

  render() {
    const { breedType, text, ...remainingProps } = this.props
    const leftValue = this.state.transitionValue
      ? ''
      : `${this.props.height} - 8px`

    return (
      <React.Fragment>
        <StyledToggleButton
          breedType={breedType}
          text={text}
          {...remainingProps}
          onClick={this.handleClick}
          left={leftValue}
        />
      </React.Fragment>
    )
  }
}

export { ToggleButton }
export default ToggleButton