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';


/*[adpresso_fs()->can_use_premium_code()]*/
import ProCompareUI from '../../../../pro/admin/assets/tracking/src/ProCompareUI';
import DatePresetPicker from './DatePresetPicker';
import Select from '../../../../admin/assets/design/components/Select';
import StarIcon from '../../../../admin/assets/design/icons/StarIcon';
/*[/adpresso_fs()->can_use_premium_code()]*/
const FilterBar = ( {currentRange, onRangeChange, currentViewMode, onViewModeChange, filterOptions, currentFilters, onFiltersChange, currentGrouping, onGroupingChange, visibleMetrics, onMetricsChange, proComponents, 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;

	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={currentRange}
				onChange={onRangeChange}
			/>
			{/*[adpresso_fs()->can_use_premium_code()]*/}
			{/*<ProCompareUI />*/}
			{/*[/adpresso_fs()->can_use_premium_code()]*/}
			<Select
				options={groupingOptions}
				selected={selectedGroupingOption}
				setSelected={( option ) => onGroupingChange( option ? option.value : 'day' )}
			/>
			<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;