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

import UploadFile from 'elementor-app/molecules/upload-file';
import DragDrop from 'elementor-app/ui/atoms/drag-drop';
import Icon from 'elementor-app/ui/atoms/icon';
import Heading from 'elementor-app/ui/atoms/heading';
import Text from 'elementor-app/ui/atoms/text';

import './drop-zone.scss';

export default function DropZone( props ) {
	const classes = [ 'e-app-drop-zone', props.className ],
		dragDropEvents = {
		onDrop: ( event ) => {
			if ( ! props.isLoading ) {
				const file = event.dataTransfer.files[ 0 ];

				if ( file && isOneOf( file.type, props.filetypes ) ) {
					props.onFileSelect( file, event, 'drop' );
				} else {
					props.onError( {
						id: 'file_not_allowed',
						message: __( 'This file type is not allowed', 'elementor' ),
					} );
				}
			}
		},
	};

	return (
		<section className={ arrayToClassName( classes ) }>
			<DragDrop { ...dragDropEvents } isLoading={ props.isLoading }>
				{ props.icon && <Icon className={ `e-app-drop-zone__icon ${ props.icon }` } /> }

				{ props.heading && <Heading variant="display-3">{ props.heading }</Heading> }

				{ props.text && <Text variant="xl" className="e-app-drop-zone__text">{ props.text }</Text> }

				{ props.secondaryText && <Text variant="xl" className="e-app-drop-zone__secondary-text">{ props.secondaryText }</Text> }

				{ props.showButton &&
					<UploadFile
						isLoading={ props.isLoading }
						type={ props.type }
						onButtonClick={ props.onButtonClick }
						onFileSelect={ props.onFileSelect }
						onWpMediaSelect={ ( frame ) => props.onWpMediaSelect( frame ) }
						onError={ ( error ) => props.onError( error ) }
						text={ props.buttonText }
						filetypes={ props.filetypes }
						variant={ props.buttonVariant }
						color={ props.buttonColor }
						onFileChoose={ props.onFileChoose }
					/> }

				{ props.description && <Text variant="xl" className="e-app-drop-zone__description">{ props.description }</Text> }
			</DragDrop>
		</section>
	);
}

DropZone.propTypes = {
	className: PropTypes.string,
	children: PropTypes.any,
	type: PropTypes.string,
	onFileSelect: PropTypes.func.isRequired,
	onWpMediaSelect: PropTypes.func,
	heading: PropTypes.string,
	text: PropTypes.string,
	secondaryText: PropTypes.string,
	buttonText: PropTypes.string,
	buttonVariant: PropTypes.string,
	buttonColor: PropTypes.string,
	icon: PropTypes.string,
	showButton: PropTypes.bool,
	showIcon: PropTypes.bool,
	isLoading: PropTypes.bool,
	filetypes: PropTypes.array.isRequired,
	onError: PropTypes.func,
	description: PropTypes.string,
	onButtonClick: PropTypes.func,
	onFileChoose: PropTypes.func,
};

DropZone.defaultProps = {
	className: '',
	type: 'file-explorer',
	icon: 'eicon-library-upload',
	showButton: true,
	showIcon: true,
	onError: () => {},
};