import { useRef } from 'react';

import Button from 'elementor-app/ui/molecules/button';

import { arrayToClassName, isOneOf } from 'elementor-app/utils/utils.js';

import './upload-file.scss';

export default function UploadFile( props ) {
	const fileInput = useRef( null ),
		baseClassName = 'e-app-upload-file',
		classes = [ baseClassName, props.className ];

		// For 'wp-media' type.
		let frame;

	return (
		<div className={ arrayToClassName( classes ) }>
			<input
				ref={ fileInput }
				type="file"
				accept={ props.filetypes.map( ( type ) => '.' + type ).join( ', ' ) }
				className="e-app-upload-file__input"
				onChange={ ( event ) => {
					const file = event.target.files[ 0 ];

					if ( file && isOneOf( file.type, props.filetypes ) ) {
						props.onFileSelect( file, event, 'browse' );
					} else {
						fileInput.current.value = '';

						props.onError( {
							id: 'file_not_allowed',
							message: __( 'This file type is not allowed', 'elementor' ),
						} );
					}
				} }
			/>

			<Button
				className="e-app-upload-file__button"
				text={ props.text }
				variant={ props.variant }
				color={ props.color }
				size="lg"
				hideText={ props.isLoading }
				icon={ props.isLoading ? 'eicon-loading eicon-animation-spin' : '' }
				onClick={ () => {
					if ( props.onFileChoose ) {
						props.onFileChoose();
					}
					if ( ! props.isLoading ) {
						if ( props.onButtonClick ) {
							props.onButtonClick();
						}

						if ( 'file-explorer' === props.type ) {
							fileInput.current.click();
						} else if ( 'wp-media' === props.type ) {
							if ( frame ) {
								frame.open();
								return;
							}

							// Initialize the WP Media frame.
							frame = wp.media( {
								multiple: false,
								library: {
									type: [ 'image', 'image/svg+xml' ],
								},
							} );

							frame.on( 'select', () => {
								if ( props.onWpMediaSelect ) {
									props.onWpMediaSelect( frame );
								}
							} );

							frame.open();
						}
					}
				} }
			/>
		</div>
	);
}

UploadFile.propTypes = {
	className: PropTypes.string,
	type: PropTypes.string,
	onWpMediaSelect: PropTypes.func,
	text: PropTypes.string,
	onFileSelect: PropTypes.func,
	isLoading: PropTypes.bool,
	filetypes: PropTypes.array.isRequired,
	onError: PropTypes.func,
	variant: PropTypes.string,
	color: PropTypes.string,
	onButtonClick: PropTypes.func,
	onFileChoose: PropTypes.func,
};

UploadFile.defaultProps = {
	className: '',
	type: 'file-explorer',
	text: __( 'Select File', 'elementor' ),
	onError: () => {},
	variant: 'contained',
	color: 'primary',
};