import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import { Item, Select, Space, tasty, Text } from '@cube-dev/ui-kit';
import formatDate from 'date-fns/format';
import { capitalize } from '../utils/capitalize';
import { DATA_RANGES } from '../values';
import { useEvent } from '../hooks';
import { FilterLabel } from './FilterLabel';
import { TimeDateRangeSelector } from './TimeDateRangeSelector';
import { FilterOptionsButton } from './FilterOptionsButton';
const DateRangeFilterWrapper = tasty(Space, {
    qa: 'DateRangeFilter',
    styles: {
        gap: '1x',
        flow: 'row wrap',
        radius: true,
        fill: {
            '': '#clear',
            ':has(>[data-qa="FilterOptionsButton"][data-is-hovered])': '#light',
        },
        margin: '-.5x',
        padding: '.5x',
        width: 'max-content',
    },
});
export function DateRangeFilter(props) {
    const { member, isCompact, isMissing, name, cubeName, cubeTitle, memberName, memberTitle, onRemove, onChange, } = props;
    const [open, setOpen] = useState(false);
    // const onGranularityChange = useCallback(
    //   (granularity?: Key) => {
    //     if (granularity === 'w/o grouping') {
    //       onChange({ ...member, granularity: undefined });
    //     } else {
    //       onChange({ ...member, granularity: granularity as TimeDimensionGranularity });
    //     }
    //   },
    //   [onChange]
    // );
    const onDateRangeChange = useCallback((dateRange) => {
        if (dateRange === 'custom') {
            onChange([formatDate(new Date(), 'yyyy-MM-dd'), formatDate(new Date(), 'yyyy-MM-dd')]);
            return;
        }
        if (dateRange === 'all time') {
            onChange(undefined);
        }
        else {
            onChange(dateRange);
        }
    }, [onChange]);
    const onDataRangeChangeInPicker = useCallback((dateRange) => {
        onChange(dateRange);
    }, [onChange]);
    const onOpenChange = (open) => {
        setOpen(open);
    };
    const onAction = useEvent((key) => {
        if (key === 'remove') {
            onRemove();
        }
    });
    return (_jsxs(DateRangeFilterWrapper, { children: [_jsx(FilterOptionsButton, { type: "dateRange", onAction: onAction }), _jsx(FilterLabel, { isCompact: isCompact, isMissing: isMissing, type: "time", member: "timeDimension", memberName: memberName, memberTitle: memberTitle, cubeName: cubeName, cubeTitle: cubeTitle, memberViewType: props.memberViewType, name: member.dimension }), _jsx(Text, { children: "for" }), _jsx(Select, { "aria-label": "Date range preset", size: "small", placeholder: "Select range", width: "min 20x", validationState: !open && !member.dateRange ? 'invalid' : undefined, 
                // @ts-ignore
                selectedKey: Array.isArray(member.dateRange) ? 'custom' : member.dateRange?.toLowerCase(), onSelectionChange: onDateRangeChange, onOpenChange: onOpenChange, children: DATA_RANGES.map((range) => {
                    return (_jsx(Item, { textValue: capitalize(range), children: _jsx(Text, { preset: "t3m", children: capitalize(range) }) }, range));
                }) }), Array.isArray(member.dateRange) ? (_jsx(TimeDateRangeSelector, { value: member.dateRange, onChange: onDataRangeChangeInPicker })) : undefined] }));
}
//# sourceMappingURL=DateRangeFilter.js.map