import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import v from '../../config/variables'

const Input = styled.input`
  width: 100%;
  outline: none;
  border: 1px solid ${v.input.borderColor};
  border-radius: 50px;
  background: ${props => (props.disabled || props.readOnly) && v.input.disabled.backgroundColor};
  color: ${v.input.color};
  text-align: ${props => props.textCenter && 'center'};
  font-size: ${props => v.fontSizes[props.size]}px;
  padding: ${props => ((v.sizeDivisor[props.size] * 3) / 4)}px ${props => v.sizeDivisor[props.size] * 3}px;

  ::placeholder {
    color: ${v.input.placeholderColor};
  }
`

class InputText extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    size: PropTypes.oneOf([
      'small',
      'medium',
      'large'
    ]),
    textCenter: PropTypes.bool,
    value: PropTypes.string,
    type: PropTypes.oneOf([
      'password',
      'text',
      'color',
      'date',
      'datetime-local',
      'email',
      'month',
      'number',
      'range',
      'search',
      'tel',
      'time',
      'url',
      'week'
    ]),
    readOnly: PropTypes.bool,
    disabled: PropTypes.bool,
    placeholder: PropTypes.string,
    onChange: PropTypes.func
  }

  static defaultProps = {
    name: null,
    size: 'medium',
    textCenter: false,
    value: '',
    type: 'text',
    readOnly: false,
    disabled: false,
    placeholder: null,
    onChange: null
  }

  /**
   * @description callback after change input text
   * @param { Object } event
   * @returns { Void }
   */
  handleChange = event => {
    const { value } = event.target
    this.props.onChange && this.props.onChange(value, this.props.name)
  }

  render() {
    return (
      <Input
        {...this.props}
        value={this.props.value}
        onChange={this.handleChange}
      />
    )
  }
}

export default InputText
