import { PropTypes, React } from '@gravityforms/libraries';
import CommonActiveFilters from '../../../utils/CommonActiveFilters';
import { SEARCH_KEY, getModules } from '../utils';

const { forwardRef } = React;

/**
 * @module ActiveFilters
 * @description The Kanban Active Filters module.
 *
 * @since 5.8.4
 *
 * @param {object}      props                   The component props.
 * @param {boolean}     props.isLoading         Whether the kanban is loading.
 * @param {Array}       props.modules           The list of modules.
 * @param {object}      props.moduleAttributes  The module attributes.
 * @param {object}      props.moduleState       The module state.
 * @param {Function}    props.setIsLoading      The function to set the loading state.
 * @param {Function}    props.updateModuleState Update the module state.
 * @param {boolean}     props.useAjax           Whether to use ajax or not.
 * @param {object|null} ref                     Ref to the component.
 *
 * @return {JSX.Element} The Kanban Active Filters component.
 */
const ActiveFilters = forwardRef( ( {
	isLoading = false,
	modules = [],
	moduleAttributes = {},
	moduleState = {},
	setIsLoading = () => {},
	updateModuleState = () => {},
	useAjax = false,
}, ref ) => {
	const { filters = [] } = moduleState;
	const {
		pill: {
			onClick: onPillClick = () => {},
			...restPillAttributes
		} = {},
		reset: {
			onClick: onResetClick = () => {},
			...restResetAttributes
		} = {},
		i18n: {
			activeFiltersLabel: activeFiltersLabelI18n = '',
		} = {},
		onFilterChange = () => {},
	} = moduleAttributes?.activeFilters || {};

	const componentProps = {
		customClasses: [ 'gform-kanban__active-filters' ],
		filters,
		label: activeFiltersLabelI18n,
		labelClasses: [ 'gform-kanban__active-filters-label' ],
		pillAttributes: {
			...restPillAttributes,
			customAttributes: {
				...( restPillAttributes?.customAttributes || {} ),
				disabled: isLoading,
			},
			onClick: ( event, filter ) => {
				if ( ! useAjax ) {
					return;
				}

				if ( isLoading ) {
					return;
				}

				const updatedFilters = filters.filter( ( f ) => f.id !== filter.id );
				const { Search } = getModules( modules, [ 'Search' ] );
				const updatedState = {
					filters: updatedFilters,
					...( ( filter.key === SEARCH_KEY && Search && Search?.getDefaultState() ) || {} ),
				};
				const combinedState = { ...moduleState, ...updatedState };
				onPillClick( event );
				setIsLoading( true );
				onFilterChange( combinedState )
					.then( ( success ) => {
						if ( ! success ) {
							return;
						}
						updateModuleState( updatedState );
					} )
					.catch( ( error ) => {
						console.info( error );
					} )
					.finally( () => {
						setIsLoading( false );
					} );
			},
		},
		resetButtonAttributes: {
			...restResetAttributes,
			disabled: isLoading,
			onClick: ( event ) => {
				if ( ! useAjax ) {
					return;
				}

				if ( isLoading ) {
					return;
				}

				const { Search } = getModules( modules, [ 'Search' ] );
				const updatedState = {
					filters: [],
					...( ( Search && Search?.getDefaultState() ) || {} ),
				};
				const combinedState = { ...moduleState, ...updatedState };
				onResetClick( event );
				setIsLoading( true );
				onFilterChange( combinedState )
					.then( ( success ) => {
						if ( ! success ) {
							return;
						}
						updateModuleState( updatedState );
					} )
					.catch( ( error ) => {
						console.info( error );
					} )
					.finally( () => {
						setIsLoading( false );
					} );
			},
		},
	};

	return <CommonActiveFilters { ...componentProps } ref={ ref } />;
} );

ActiveFilters.propTypes = {
	isLoading: PropTypes.bool,
	modules: PropTypes.array,
	moduleAttributes: PropTypes.object,
	moduleState: PropTypes.object,
	setIsLoading: PropTypes.func,
	updateModuleState: PropTypes.func,
	useAjax: PropTypes.bool,
};

ActiveFilters.displayName = 'ActiveFilters';

export default {
	name: 'ActiveFilters',
	ActiveFilters,
};
