import React from 'react'
import PropTypes from 'prop-types'
import {renderBytes, renderList} from 'common-fe/utils/render'
import Avatar from 'react-uikit/avatar'
import Button from 'react-uikit/button'
import BEMModule from 'utils/bem'
import styles from '../../styles.scss'

const bem = new BEMModule(styles)

const UploadTarget = ({
    accept,
    canDragUpload,
    iconName,
    isDragOver,
    maxSize,
    multiple,
    previewUrl,
    renderError,
    onClick,
    ...rest
}) => {
    const uploadTargetClasses = bem.classNames('c-file-upload__target', {
        active: isDragOver,
        hover: !canDragUpload,
    })
    const uploadMessageClasses = bem.classNames('c-file-upload__message')
    const iconClasses = bem.classNames('c-file-upload__icon')
    const hrClasses = bem.classNames('c-file-upload__hr')
    const fileTypesText =
        !accept || !accept.length ? '' : renderList(accept, 'or')
    const pluralizedText = multiple
        ? `${fileTypesText} files`
        : `a ${`${fileTypesText} `}file`
    const messageText = canDragUpload
        ? `Drag and drop ${pluralizedText} here to upload.`
        : `Click here to upload ${pluralizedText}.`

    return (
        <React.Fragment>
            <div
                className={uploadTargetClasses}
                onClick={!canDragUpload ? onClick : null}
                {...rest}
            >
                <Avatar
                    avatarUrl={previewUrl}
                    className={iconClasses}
                    editIconName={iconName}
                    size="large"
                    editing
                />

                <span className={uploadMessageClasses}>{messageText}</span>

                <span>(Max file size: {`${renderBytes(maxSize, 0)})`}</span>
                <div style={{textAlign: 'center'}}>{renderError}</div>
            </div>

            {canDragUpload && (
                <React.Fragment>
                    <span className={hrClasses}>or</span>

                    <Button
                        isOutline
                        variant="success"
                        text={`Choose ${
                            multiple ? 'files' : 'a file'
                        } from your computer`}
                        onClick={onClick}
                    />
                </React.Fragment>
            )}
        </React.Fragment>
    )
}

UploadTarget.propTypes = {
    accept: PropTypes.array,
    avatarUrl: PropTypes.string,
    canDragUpload: PropTypes.bool,
    iconName: PropTypes.string,
    isDragOver: PropTypes.bool,
    maxSize: PropTypes.number,
    multiple: PropTypes.bool,
    previewUrl: PropTypes.string,
    renderError: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    onClick: PropTypes.func,
}

export default UploadTarget