import {__} from '@wordpress/i18n';
import DateRangePicker from '../../../../admin/assets/design/components/DateRangePicker';
import TokenSelectField from '../../../../admin/assets/design/form-fields/TokenSelectField';
import ButtonGroup from '../../../../admin/assets/design/components/ButtonGroup';
import MetricToggles from './MetricToggles';
import Button from '../../../../admin/assets/design/components/Button';
import DatePresetPicker from './DatePresetPicker';
import {getPresetRangeValue} from './dateRanges';
import Select from '../../../../admin/assets/design/components/Select';
import StarIcon from '../../../../admin/assets/design/icons/StarIcon';

const FilterBar = ( {currentRange, onRangeChange, currentViewMode, onViewModeChange, filterOptions, currentFilters, onFiltersChange, currentGrouping, onGroupingChange, visibleMetrics, onMetricsChange, proComponents = [], compareMode = null, onCompareModeChange, onSaveView, isDefaultView} ) => {

	const groupingOptions = [
		{value: 'day', label: __( 'Day', 'adpresso' )},
		{value: 'week', label: __( 'Week', 'adpresso' )},
		{value: 'month', label: __( 'Month', 'adpresso' )},
		{value: 'year', label: __( 'Year', 'adpresso' )}
	];

	const presetValue = (typeof currentRange === 'object' && currentRange !== null)
		? 'custom'
		: currentRange;

	// A preset shows its own days in the date fields, not an empty placeholder.
	const pickerValue = typeof currentRange === 'string' && currentRange !== 'custom'
		? getPresetRangeValue( currentRange )
		: currentRange;

	const isCustom = currentRange === 'custom';
	const selectedGroupingOption = groupingOptions.find( opt => opt.value === currentGrouping ) || groupingOptions[0];

	return (
		<div className="adpresso-analytics-filterbar">
			<DatePresetPicker
				value={presetValue}
				onChange={onRangeChange}
			/>
			<DateRangePicker
				value={pickerValue}
				onChange={onRangeChange}
			/>
			<Select
				options={groupingOptions}
				selected={selectedGroupingOption}
				setSelected={( option ) => onGroupingChange( option ? option.value : 'day' )}
			/>
			{/* Components added via the adpresso.analytics.filterBarComponents filter. */}
			{proComponents.map( ( Component, index ) => (
				<Component
					key={index}
					compareMode={compareMode}
					onCompareModeChange={onCompareModeChange}
					currentRange={currentRange}
				/>
			) )}
			<Button
				icon={<StarIcon filled={isDefaultView} />}
				variant="secondary"
				title={isDefaultView ? __('This is your default view (Click to remove)' , 'adpresso') : __('Set as Default View', 'adpresso')}
				onClick={onSaveView}
				className="adpresso-star-button"
			>

			</Button>
		</div>
	);
};

export default FilterBar;