import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import moment from 'moment';
import styles from './datepicker.scss';

import 'moment/locale/nl';

const cx = classnames.bind(styles);

const Input = ({
  value,
  onClick,
  onKeyDown,
  onFocus,
  onBlur,
  tabIndex,
  format,
  success,
  danger,
}) => {
  return (
    <span
      role="button"
      tabIndex={tabIndex}
      onClick={onClick}
      onKeyDown={onKeyDown}
      onFocus={onFocus}
      onBlur={onBlur}
      className={cx('datepicker__input', {
        datepicker__input__selected: false,
        datepicker__input__success: success,
        datepicker__input__danger: danger,
        datepicker__input__hasValue: value,
      })}
    >
      {value ? moment(value).format(format) : 'Selecteer een datum'}
    </span>
  );
};

Input.defaultProps = {
  value: undefined,
  tabIndex: 0,
  onClick: undefined,
  onKeyDown: undefined,
  onFocus: undefined,
  onBlur: undefined,
  success: false,
  danger: false,
};

Input.propTypes = {
  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
  onClick: PropTypes.func,
  onKeyDown: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  format: PropTypes.string.isRequired,
  tabIndex: PropTypes.number,
  success: PropTypes.bool,
  danger: PropTypes.bool,
};

export default Input;