import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ReactDropzone from 'react-dropzone';

import {translate} from '../../../utils';

import {Block} from '../Block';
import {Button} from '../Button';

// for full documentation visit https://react-dropzone.js.org/#dropzone
export class Dropzone extends Component {
    static propTypes = {
        ...ReactDropzone.propTypes,
        contentClassname: PropTypes.string,
        testAutomationId: PropTypes.string,
        dragText: PropTypes.string,
        orText: PropTypes.string
    };

    static defaultProps = {
        contentClassname: 'rc-dropzone-content',
        testAutomationId: 'dropzone',
        dragText: 'TRANSLATE:DRAG_FILES_HERE',
        orText: 'TRANSLATE:OR'
    };

    renderContent() {
        const {children, contentClassname, dragText, orText} = this.props;

        if (children) {
            return <div className={contentClassname}>{children}</div>;
        }

        return (
            <div className={contentClassname}>
                <Block condensed>
                    <span className="rc-dropzone-caption">{translate(dragText)}</span>
                </Block>
                <Block condensed>
                    <span className="rc-dropzone-or">{translate(orText)}</span>
                </Block>
                <Button>Upload File</Button>
            </div>
        );
    }

    render() {
        const {testAutomationId, ...restProps} = this.props;

        return (
            <ReactDropzone
                {...restProps}
                className="rc-dropzone"
                activeClassName="rc-dropzone-active"
                acceptClassName="rc-dropzone-accept"
                rejectClassName="rc-dropzone-reject"
                disabledClassName="rc-dropzone-disabled"
                data-test-automation-id={testAutomationId}>
                {this.renderContent()}
            </ReactDropzone>
        );
    }
}
