/**
 * Individual filter chip — renders the appropriate filter editor.
 *
 * @package RawTypeOE
 */

import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Badge, Button, Card } from '@rawtype/ui';
import DateFilterChip, { getDateFilterSummary } from './DateFilterChip';
import StatusFilterChip, { getStatusFilterSummary } from './StatusFilterChip';
import CategoryFilterChip, { getCategoryFilterSummary } from './CategoryFilterChip';
import TagFilterChip, { getTagFilterSummary } from './TagFilterChip';
import ProductFilterChip, { getProductFilterSummary } from './ProductFilterChip';
import SkuFilterChip, { getSkuFilterSummary } from './SkuFilterChip';
import NumericFilterChip, { getNumericFilterLabel, getNumericFilterSummary } from './NumericFilterChip';

const NUMERIC_TYPES = new Set( [ 'order_total', 'customer_total_spend', 'customer_orders_count', 'product_price' ] );

const FILTER_CONFIG = {
	date: {
		label: __( 'Date', 'rawtype-order-exporter-woocommerce' ),
		summary: getDateFilterSummary,
		Component: DateFilterChip,
	},
	status: {
		label: __( 'Status', 'rawtype-order-exporter-woocommerce' ),
		summary: getStatusFilterSummary,
		Component: StatusFilterChip,
	},
	category: {
		label: __( 'Category', 'rawtype-order-exporter-woocommerce' ),
		summary: getCategoryFilterSummary,
		Component: CategoryFilterChip,
	},
	tag: {
		label: __( 'Tag', 'rawtype-order-exporter-woocommerce' ),
		summary: getTagFilterSummary,
		Component: TagFilterChip,
	},
	product: {
		label: __( 'Product', 'rawtype-order-exporter-woocommerce' ),
		summary: getProductFilterSummary,
		Component: ProductFilterChip,
	},
	sku: {
		label: __( 'SKU', 'rawtype-order-exporter-woocommerce' ),
		summary: getSkuFilterSummary,
		Component: SkuFilterChip,
	},
};

function getFilterConfig( filter ) {
	if ( NUMERIC_TYPES.has( filter.type ) ) {
		return {
			label: getNumericFilterLabel( filter.type ),
			summary: getNumericFilterSummary,
			Component: NumericFilterChip,
		};
	}

	return FILTER_CONFIG[ filter.type ] || null;
}

export default function FilterChip( { filter, entity, onUpdate, onRemove } ) {
	const [ expanded, setExpanded ] = useState( true );
	const config = getFilterConfig( filter );
	const FilterEditor = config ? config.Component : null;

	const label = config ? config.label : filter.type || '?';
	const summary = config ? config.summary( filter ) : '...';

	return (
		<Card hover={ false } grain={ false } className="roe-filter-chip">
			<div className="roe-filter-chip-header">
				<button
					type="button"
					className="roe-filter-chip-toggle"
					onClick={ () => setExpanded( ! expanded ) }
				>
					<Badge variant="default">{ label }</Badge>
					{ ! expanded && (
						<span className="roe-filter-chip-summary">
							{ summary }
						</span>
					) }
				</button>
				<Button
					type="button"
					variant="outline"
					size="sm"
					onClick={ () => onRemove( filter.id ) }
					className="roe-filter-chip-remove"
					aria-label={ __( 'Remove filter', 'rawtype-order-exporter-woocommerce' ) }
				>
					×
				</Button>
				</div>

				<div className="roe-filter-chip-editor" hidden={ ! expanded }>
					{ FilterEditor && (
						<FilterEditor
							filter={ filter }
							entity={ entity }
							onChange={ ( updated ) => onUpdate( filter.id, updated ) }
						/>
					) }
				</div>
			</Card>
		);
	}
