import {__} from '@wordpress/i18n';
import Button from '../components/Button';
import '../scss/_html5_upload.scss';

const Html5UploadField = ( {field, value, onChange} ) => {

	const openMediaLibrary = () => {
		const frame = wp.media( {
			title:    __( 'Select HTML5 ZIP File', 'adpresso' ),
			button:   {text: __( 'Use this ZIP', 'adpresso' )},
			multiple: false,
			library:  {
				type: 'application/zip'
			}
		} );

		frame.on( 'select', () => {
			const attachment = frame.state().get( 'selection' ).first().toJSON();

			wp.apiFetch( {
				path:   '/adpresso/v1/extract-html5',
				method: 'POST',
				data:   {attachment_id: attachment.id}
			} ).then( response => {
				onChange( field.id, response.directory );
			} ).catch( error => {
				console.error( error );
			} ).finally( () => {
			} );
		} );

		frame.open();
	};

	const getFileName = ( url ) => {
		if ( !url ) {
			return '';
		}
		return url.split( '/' ).pop();
	};

	return (
		<div className="adpresso-html5-upload-wrapper">
			<div className="adpresso-html5-preview">
				{value ? (
					<div className="adpresso-file-display">
						<span className="dashicons dashicons-media-archive adpresso-file-icon"></span>
						<span className="adpresso-file-name">{getFileName( value )}</span>
					</div>
				) : (
					<div className="adpresso-image-placeholder">
						{__( 'No ZIP file selected', 'adpresso' )}
					</div>
				)}
			</div>

			<div className="adpresso-html5-actions">
				<Button
					variant="primary"
					className="adpresso-btn adpresso-btn-action"
					onClick={openMediaLibrary}
				>
					{__( 'Select ZIP file', 'adpresso' )}
				</Button>

				{value && (
					<Button
						variant="destructive"
						className="adpresso-btn adpresso-btn-action"
						isDestructive
						onClick={() => onChange( field.id, '' )}
					>
						{__( 'Remove ZIP', 'adpresso' )}
					</Button>
				)}
			</div>
		</div>
	);
};

export default Html5UploadField;