import React from 'react';
import PropTypes from 'prop-types';

import {StyledDatePickerInput} from './styles';

const DatePickerInput = (props) => {
  const {
    placeholder,
    onChange,
    onFocus,
    onBlur,
    onKeyDown,
    isDisabled,
    value,
    id,
  } = props;

  return (
    <StyledDatePickerInput
      type="text"
      autoComplete="off"
      placeholder={placeholder}
      isDisabled={isDisabled}
      onKeyDown={onKeyDown}
      onChange={(e) => onChange(e.target.value)}
      onFocus={onFocus}
      onBlur={onBlur}
      value={value}
      id={id}
    />
  );
};

DatePickerInput.propTypes = {
  placeholder: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onFocus: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired,
  onKeyDown: PropTypes.func.isRequired,
  value: PropTypes.string,
  id: PropTypes.string.isRequired,
  isDisabled: PropTypes.bool,
};

DatePickerInput.defaultProps = {
  value: '',
  isDisabled: false,
};

export default DatePickerInput;