import {__} from '@wordpress/i18n';
import CheckboxButtonGroup from '../../../../admin/assets/design/components/CheckboxButtonGroup';
import {useMemo} from '@wordpress/element';
import useProDataFetching from '../../../../pro/admin/assets/tracking/src/useProDataFetching';
import PremiumBadge from '../../../../admin/assets/design/partials/premium-badge';

const rawData = window.adpressoAnalyticsData || {};
const isPro = rawData.isPro === '1';

const METRIC_DEFINITIONS = [
	{key: 'impressions', label: __( 'Impressions', 'adpresso' ), className: 'adpresso-color-graph-one'},
	{key: 'clicks', label: __( 'Clicks', 'adpresso' ), className: 'adpresso-color-graph-two'},
	{key: 'ctr', label: __( 'CTR (%)', 'adpresso' ), className: 'adpresso-color-graph-three'},
	{key: 'viewability', label: __( 'Active View Rate (%)', 'adpresso' ), className: 'adpresso-color-graph-four', disabled: !isPro},
	{key: 'impressions_av', label: __( 'Active View Impressions', 'adpresso' ), className: 'adpresso-color-graph-five', disabled: !isPro}
];

const MetricToggles = ( {visibleMetrics, onMetricsChange} ) => {

	// 1. Options vorbereiten:
	// Wir filtern PRO raus und mappen 'key' zu 'value', da die Komponente 'value' erwartet
	const groupOptions = useMemo( () => {
		return METRIC_DEFINITIONS
			// .filter(metric => !metric.disabled || isPro)
			.map( metric => ({
				label:     metric.label,
				value:     metric.key,
				className: metric.className,
				disabled:  metric.disabled
			}) );
	}, [isPro] );

	// 2. Values vorbereiten (Array -> Objekt):
	// ['impressions', 'clicks']  ===>  { impressions: true, clicks: true }
	const groupValues = useMemo( () => {
		return visibleMetrics.reduce( ( acc, key ) => ({
			...acc,
			[key]: true // oder '1', je nachdem wie strikt deine Komponente ist
		}), {} );
	}, [visibleMetrics] );

	// 3. Handler (Objekt -> Array):
	// { impressions: true, clicks: false } ===> ['impressions']
	const handleGroupChange = ( newValuesObj ) => {
		// Wir nehmen nur die Keys, die 'truthy' sind
		const newMetricsArray = Object.keys( newValuesObj ).filter( key => newValuesObj[key] );

		onMetricsChange( newMetricsArray );
	};

	return (
		<div className="adpresso-analytics-metrictoggles">
			<CheckboxButtonGroup
				name="metric_selection"
				options={groupOptions}
				values={groupValues}
				onChange={handleGroupChange}
			/>
			{!isPro && <PremiumBadge/>}
		</div>
	);
};

export default MetricToggles;