'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import {default as BSFormControl} from 'react-bootstrap/lib/FormControl';
import {FormControl} from './FormControl';
import {Button} from '../Button';
import {Icon} from '../Icon';
import {DangerousHTML} from '../DangerousHTML';
import lang from '../../../lang/common/index-en_US';

export class FileUploadControl extends FormControl<any> {
    static propTypes = {
        ...FormControl.propTypes,
        accept: PropTypes.string,
        multiple: PropTypes.bool,
        uploadIcon: PropTypes.string,
        uploadText: PropTypes.string,
        onCancelSelect: PropTypes.func
    };

    static defaultProps = {
        ...FormControl.defaultProps,
        get uploadText() {
            return lang.UPLOAD;
        },
        multiple: false,
        accept: '',
        uploadIcon: 'upload',
        onCancelSelect: e => e
    };

    getValue() {
        let node = this.getInputDOMNode() as any;
        return node && node.files;
    }

    outputConverter(e) {
        return e.target ? e.target.files : e;
    }

    getUploadIcon() {
        let {uploadIcon} = this.props;

        if (uploadIcon) {
            return <Icon name={uploadIcon} aria-hidden="true" />;
        }
        return null;
    }

    getUploadText() {
        let {uploadText} = this.props;

        if (uploadText) {
            return <DangerousHTML>{uploadText}</DangerousHTML>;
        }
        return null;
    }

    renderUploadButton() {
        let {id, bsStyle} = this.props;

        let uploadIcon = this.getUploadIcon();
        let uploadText = this.getUploadText();

        let withIcon = !!uploadIcon;
        let iconOnly = withIcon && !uploadText;
        let ariaDescId = this.props['aria-describedby'] ? this.props['aria-describedby'] : null;

        return (
            <Button
                withIcon={withIcon}
                iconOnly={iconOnly}
                bsStyle={bsStyle}
                ref="uploadButton"
                id={getUploadBtnId(id)}
                testAutomationId="uploadButton"
                aria-describedby={ariaDescId}
                onClick={() => {
                    this.reset();
                    this.props.onCancelSelect();
                    this.click();
                }}>
                {uploadIcon}
                {uploadText}
            </Button>
        );
    }

    //file-Input would not trigger onChange, if select same files next time
    reset() {
        (ReactDOM.findDOMNode(this.refs.realForm) as any).reset();
    }

    render() {
        let {value, id, ...props} = this.getPropsFromContext();
        return (
            <form ref="realForm">
                <BSFormControl
                    onChange={props.onChange}
                    data-test-automation-id="FileUploadControl"
                    aria-labelledby={getUploadBtnId(id)}
                    aria-hidden //hidden for screen reader
                    tabIndex={-1}
                    className="sr-only"
                    type="file"
                    ref="input"
                    multiple={props.multiple}
                    accept={this.props.accept}
                />
                {this.renderUploadButton()}
            </form>
        );
    }
}

function getUploadBtnId(id) {
    return `${id || ''}UploadButton`;
}
