import { useMemo } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import './DrilldownStatus.scss';

// Hilfsfunktion, um das Label für eine ID zu finden
const getLabel = (options, value) => {
	return options.find(opt => opt.value == value)?.label || `ID: ${value}`;
};

const DrilldownStatus = ({ filters, filterOptions, onFiltersChange, previousState, onGoBack }) => {

	// 1. Baue die "Zurück"-Button-Beschriftung
	let backButtonLabel = '';
	if (previousState) {
		// Erstelle einen lesbaren Namen für den vorherigen View-Modus
		const viewModeMap = {
			date: __('Date Overview', 'adpresso'),
			ads: __('Ads', 'adpresso'),
			groups: __('Groups', 'adpresso'),
			placements: __('Placements', 'adpresso'),
		};
		backButtonLabel = sprintf(__('Back to %s', 'adpresso'), viewModeMap[previousState.viewMode] || 'Overview');
	}

	// 2. Baue die Liste der aktiven Filter-Chips
	const activeFilterChips = useMemo(() => {
		const chips = [];
		// Gehe durch alle Filter-Typen
		for (const key of ['ads', 'groups', 'placements']) {
			if (filters[key] && filters[key].length > 0) {
				// Erstelle einen Chip für jeden ausgewählten Wert
				filters[key].forEach(value => {
					chips.push({
						key: `${key}-${value}`, // Einzigartiger Key für React
						typeLabel: key.charAt(0).toUpperCase() + key.slice(1, -1), // z.B. "Ad"
						label: getLabel(filterOptions[key], value), // z.B. "Meine Test-Anzeige"
						onClick: () => {
							// Beim Klick auf [x] wird dieser eine Filter entfernt
							onFiltersChange(prevFilters => ({
								...prevFilters,
								[key]: prevFilters[key].filter(id => id !== value),
							}));
						},
					});
				});
			}
		}
		return chips;
	}, [filters, filterOptions, onFiltersChange]);

	// Rendere die Leiste nur, wenn es etwas anzuzeigen gibt
	if (!previousState && activeFilterChips.length === 0) {
		return null;
	}

	return (
		<div className="adpresso-analytics-statusbar">
			{/* Teil 1: Der "Zurück"-Button (nur im Drilldown sichtbar) */}
			{previousState && (
				<Button
					variant="link"
					icon="arrow-left-alt2"
					onClick={onGoBack}
					className="adpresso-analytics-back-button"
				>
					{backButtonLabel}
				</Button>
			)}

			{/* Teil 2: Die aktiven Filter-Chips */}
			<div className="adpresso-active-filters">
				{activeFilterChips.map(chip => (
					<span key={chip.key} className="adpresso-filter-chip">
                        <strong>{chip.typeLabel}:</strong> {chip.label}
						<button
							type="button"
							className="adpresso-filter-chip__remove"
							onClick={chip.onClick}
							aria-label={`Remove filter: ${chip.label}`}
						>
                            &times;
                        </button>
                    </span>
				))}
			</div>
		</div>
	);
};

export default DrilldownStatus;