import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputLabel from './InputLabel';
import Input from './Input';
import InputFeedback from './InputFeedback';
import FileUpload from './FileUpload';

class FileUploadForm extends Component {
  static propTypes = {
    valid: PropTypes.bool,
    variant: PropTypes.oneOf(['dark', 'light']),
    label: PropTypes.string,
    errorMessage: PropTypes.string,
    note: PropTypes.any,
    className: PropTypes.string,
  };
  static defaultProps = {
    label: null,
    errorMessage: null,
    note: null,
    variant: 'dark',
    valid: true,
    className: null,
  };

  render() {
    const { label, errorMessage, note, valid, variant, className, ...props } = this.props;
    return (
      <Input variant={variant} valid={valid} className={className}>
        {label ? (
          <InputLabel>
            {label}
            <FileUpload {...props} />
          </InputLabel>
        ) : (
          <FileUpload {...props} />
        )}
        {!valid ? <InputFeedback type="error">{errorMessage} </InputFeedback> : ''}
        <InputFeedback>{note}</InputFeedback>
      </Input>
    );
  }
}

export default FileUploadForm;