// @flow
import React from 'react'
import Wrapper from './Wrapper'
import InputFieldWrapper from './InputFieldWrapper'
import InputMessage from './InputMessage'

type Props = {
  role: string,
  className?: string,
  hasMessage?: boolean,
  message?: string,
  placeholder?: string,
  isError?: boolean,
  size?: string,
  color?: string
}

export const Input = ({
  role,
  className,
  size = 'normal',
  color = 'blue',
  hasMessage = false,
  message = 'Congratulations! You have been pre-registered successfully',
  placeholder = 'Enter your email',
  isError = false
}: Props) => {
  return (
    <Wrapper
      role={role}
      size={size}
      className={className}
      hasMessage={hasMessage}
      message={message}
      placeholder={placeholder}
      isError={isError}
    >
      <InputFieldWrapper
        sizeFromParent={size}
        colorFromParent={color}
        placeholderFromParent={placeholder}
      />
      <InputMessage hasParentMessage={hasMessage} isParentError={isError}>
        {message}
      </InputMessage>
    </Wrapper>
  )
}

export default Input
