import React from 'react'
import classNames from 'classnames'

import Input from '../input/input'
import TextWidth from './text-width'

const InputAutosize = ({ style, value, className, ...inputProps }) => (
  <TextWidth text={value}>
    {({ innerRef, minWidth }) => (
      <Input
        {...inputProps}
        value={value}
        innerRef={innerRef}
        className={classNames('sw-input-autosize', className)}
        style={{
          ...style,
          minWidth
        }}
      />
    )}
  </TextWidth>
)

InputAutosize.displayName = 'InputAutosize'

export default InputAutosize