/**
 * External dependencies
 */
import React, { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

/**
 * WordPress dependencies
 */
import { Button, Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { closeModal, deleteFolder, updateSnackbar } from '../../redux/slice/folders';
import { useDeleteFolderMutation, useBulkDeleteFoldersMutation } from '../../redux/api/folders';
import './scss/modal.scss';
import { triggerFilterChange } from '../../data/media-grid';

const DeleteModal = () => {
	const [ isLoading, setIsLoading ] = useState( false );

	const dispatch = useDispatch();

	const isOpen = useSelector( ( state ) => state.FolderReducer.modals.delete );
	const selectedFolder = useSelector( ( state ) => state.FolderReducer.currentContextMenuFolder );
	const isMultiSelecting = useSelector( ( state ) => state.FolderReducer.isMultiSelecting );
	const multiSelectedFolderIds = useSelector( ( state ) => state.FolderReducer.multiSelectedFolderIds );

	const [ deleteFolderMutation ] = useDeleteFolderMutation();
	const [ bulkDeleteFoldersMutation ] = useBulkDeleteFoldersMutation();
	const ref = useRef( null );

	useEffect( () => {
		if ( isOpen ) {
			setIsLoading( false );
			// Focus the button after render
			setTimeout( () => {
				ref.current?.focus();
			}, 0 );
		}
	}, [ isOpen ] );

	const handleSubmit = async () => {
		if ( isLoading ) {
			return;
		}

		setIsLoading( true );

		try {
			// `.unwrap()` is required: RTK Query mutations RESOLVE (do not throw) on
			// HTTP 4xx/5xx, so without it a server rejection would fall through to the
			// success path below — showing "deleted successfully" and dropping the
			// folder from the tree even though it still exists on the server. unwrap()
			// re-throws the error payload so failures reach the catch (matching how
			// Rename/Create already handle their mutations).
			let partialMessage = null;

			if ( ! isMultiSelecting ) {
				await deleteFolderMutation( selectedFolder.id ).unwrap();
			} else if ( multiSelectedFolderIds && multiSelectedFolderIds.length ) {
				// The bulk endpoint returns HTTP 200 with `errors` on *partial* failure, so
				// .unwrap() alone won't throw. On a partial failure we still remove the whole
				// selection optimistically and surface a WARNING (not "deleted successfully");
				// the invalidation refetch below re-adds any folder that wasn't actually
				// deleted, so successfully-deleted folders don't linger (even on load-more
				// pages, where the reducer removes them from the flat list).
				const bulkResult = await bulkDeleteFoldersMutation( multiSelectedFolderIds ).unwrap();

				if ( bulkResult?.errors?.length ) {
					partialMessage = bulkResult.message || __( 'Some folders could not be deleted', 'godam' );
				}
			}

			dispatch( deleteFolder() );

			dispatch( updateSnackbar(
				{
					message: partialMessage || ( isMultiSelecting ? __( 'Folders deleted successfully', 'godam' ) : __( 'Folder deleted successfully', 'godam' ) ),
					type: partialMessage ? 'fail' : 'success',
				},
			) );

			triggerFilterChange( 'all' );
		} catch ( error ) {
			dispatch( updateSnackbar(
				{
					message: error?.message || error?.data?.message || __( 'Failed to delete folder', 'godam' ),
					type: 'fail',
				},
			) );
		} finally {
			setIsLoading( false );
			dispatch( closeModal( 'delete' ) );
		}
	};

	const handleKeyDown = ( e ) => {
		if ( e.key === 'Enter' ) {
			handleSubmit();
		}
	};

	return (
		( isOpen && selectedFolder ) && (
			<Modal
				title={ __( 'Confirm Delete', 'godam' ) }
				onRequestClose={ () => dispatch( closeModal( 'delete' ) ) }
				className="modal__container"
			>
				<p className="modal__description">
					{ isMultiSelecting ? (
						<>
							{ __( 'Deleting', 'godam' ) } <span className="modal__highlight">{ __( 'these', 'godam' ) } { multiSelectedFolderIds && multiSelectedFolderIds.length } { __( 'folders', 'godam' ) }</span> { __( 'will remove them and all its subfolders, but', 'godam' ) } <span className="modal__highlight">{ __( 'media associated with them will not be deleted', 'godam' ) }</span>.
						</>
					) : (
						<>
							{ __( 'Deleting the folder', 'godam' ) } <span className="modal__highlight">{ selectedFolder.name }</span> { __( 'will remove it and all its subfolders, but', 'godam' ) } <span className="modal__highlight">{ __( 'media associated with it will not be deleted', 'godam' ) }</span>.
						</>
					) }
				</p>
				<p className="modal__warning">
					{ __( 'Are you sure you want to proceed? This action cannot be undone.', 'godam' ) }
				</p>

				<div className="modal__button-group">
					<Button
						isBusy={ isLoading }
						ref={ ref }
						text={ __( 'Delete', 'godam' ) }
						variant="primary"
						onClick={ () => handleSubmit() }
						isDestructive
						onKeyDown={ handleKeyDown }
					/>
					<Button
						text={ __( 'Cancel', 'godam' ) }
						onClick={ () => dispatch( closeModal( 'delete' ) ) }
						isDestructive
					/>
				</div>
			</Modal>
		)
	);
};

export default DeleteModal;