import React from 'react';
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
import Icon from 'components/Icon';
import Link from 'components/Link';
import * as styles from './styles';

export default class FileLoader extends React.Component {
  static propTypes = {
    /**
     * Handler for the onChange event on the input.
     */
    onChange: PropTypes.func,
    /**
     * Marks that this input is required for form submission.
     */
    required: PropTypes.bool,
    /**
     * Marks that the user cannot change this input.
     */
    disabled: PropTypes.bool,
    /**
     * Adds a class name to the input element.
     */
    className: PropTypes.string,
    /**
     * Adds an id to the input element.
     */
    id: PropTypes.string,
    /**
     * A component to render the drop area
     */
    DropArea: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    /**
     * A component to render the preview container
     */
    Preview: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  };

  static defaultProps = {
    required: false,
    disabled: false,
    className: null,
    id: null,
    DropArea: styles.DropArea,
    Preview: styles.Preview,
  };

  static styles = styles;

  preventLinkClick = ev => {
    ev.preventDefault();
  };

  renderFiles = () => {
    const { value, error, disabled, DropArea, Preview } = this.props;
    if (value && value[0]) {
      return (
        <DropArea disabled={disabled}>
          <Icon name="fileFilled" />
          <Preview active={true}>{value[0].name}</Preview>
        </DropArea>
      );
    } else {
      return (
        <DropArea error={error} disabled={disabled}>
          <Icon name="file" />
          <Preview>
            DROP A FILE HERE, OR&nbsp;
            <Link disabled={disabled} onClick={this.preventLinkClick}>
              CLICK TO BROWSE
            </Link>
          </Preview>
        </DropArea>
      );
    }
  };

  render() {
    const {
      onChange,
      value,
      required,
      disabled,
      className,
      id,
      DropArea,
      Preview,
      error,
      ...rest
    } = this.props;

    return (
      <Dropzone
        multiple={false}
        onDrop={files => onChange(files)}
        style={{ width: '100%' }}
        activeStyle={{ color: '#00bcec' }}
        rejectStyle={{}}
        value={value}
        required={required}
        disabled={disabled}
        className={className}
        id={id}
        {...rest}
      >
        {this.renderFiles()}
      </Dropzone>
    );
  }
}

@@ -142,70 +142,90 @@
 ort 
-Link from 'components/Link';%0Aimport * as styles from './styles
+* as styles from './styles';%0Aimport TextLink from 'components/Link/styles/TextLink
 ';%0A%0A
@@ -1261,68 +1261,8 @@
 s;%0A%0A
-  preventLinkClick = ev =%3E %7B%0A    ev.preventDefault();%0A  %7D;%0A%0A
   re
@@ -1747,64 +1747,136 @@
    %3C
-Link disab
+TextLink%0A              as=%22div%22%0A              sty
 le
-d
 =%7B
+%7B 
 dis
-abled%7D onClick=%7Bthis.preventLinkClick%7D
+play: 'inline-block' %7D%7D%0A              disabled=%7Bdisabled%7D%0A            
 %3E%0A  
@@ -1903,16 +1903,16 @@
  BROWSE%0A
-
         
@@ -1917,16 +1917,20 @@
       %3C/
+Text
 Link%3E%0A  

fix file loader text link preventing click