import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo, useRef } from 'react';
import { CloseIcon, Flex, Menu, MenuTrigger, PlusIcon, Space, tasty, Text, TimeIcon, } from '@cube-dev/ui-kit';
import { ChevronIcon } from '../icons/ChevronIcon';
import { NonPublicIcon } from '../icons/NonPublicIcon';
import { ItemInfoIcon } from '../icons/ItemInfoIcon';
import { titleize } from '../utils/index';
import { PREDEFINED_GRANULARITIES } from '../values';
import { useEvent, useShownMemberName } from '../hooks';
import { GranularityListMember } from './GranularityListMember';
import { ListMemberButton } from './ListMemberButton';
import { FilterByMemberButton } from './FilterByMemberButton';
import { FilteredLabel } from './FilteredLabel';
import { InstanceTooltipProvider } from './InstanceTooltipProvider';
const GranularitiesWrapper = tasty(Flex, {
    styles: {
        position: 'relative',
        flow: 'column',
        gap: '1bw',
        margin: '4x left',
        TimeListLine: {
            position: 'absolute',
            inset: '0 auto 0 (1bw - 2x)',
            fill: '#dimension-active',
            width: '.25x',
            radius: true,
        },
    },
});
export function TimeListMember(props) {
    const textRef = useRef(null);
    const { isOpen, cube, member, filterString, isSelected, isFiltered, isDateRangeFiltered, isMissing, selectedGranularities = [], memberViewType, onDimensionToggle, onGranularityToggle, onAddDataRange, onRemoveDataRange, onAddFilter, onRemoveFilter, onToggle, } = props;
    const name = member.name.replace(`${cube.name}.`, '').trim();
    const title = 'shortTitle' in member ? member.shortTitle : undefined;
    // @ts-ignore
    const description = member.description;
    const isTimestampSelected = isSelected();
    const definedGranularities = (member.type === 'time' ? ('granularities' in member ? member?.granularities : []) : []) ?? [];
    const definedGranularityNames = definedGranularities.map((g) => g.name);
    const nonPredefinedGranularityNames = [...definedGranularityNames];
    const { shownMemberName } = useShownMemberName({
        cubeName: cube.name,
        cubeTitle: 'title' in cube ? cube.title : undefined,
        memberName: name,
        memberTitle: title,
        type: memberViewType,
    });
    selectedGranularities.forEach((granularity) => {
        if (!nonPredefinedGranularityNames.includes(granularity) &&
            !PREDEFINED_GRANULARITIES.includes(granularity)) {
            nonPredefinedGranularityNames.push(granularity);
        }
    });
    const missingGranularities = selectedGranularities.filter((granularity) => !definedGranularityNames.includes(granularity) &&
        !PREDEFINED_GRANULARITIES.includes(granularity));
    const definedGranularitiesTitleMap = useMemo(() => {
        return (member.type === 'time' &&
            definedGranularities?.reduce((map, granularity) => {
                map[granularity.name] = granularity.title;
                return map;
            }, {}));
    }, [member.type === 'time' ? definedGranularities : null]);
    const allGranularityNames = nonPredefinedGranularityNames.concat(PREDEFINED_GRANULARITIES);
    const isGranularitySelectedMap = {};
    allGranularityNames.forEach((granularity) => {
        isGranularitySelectedMap[granularity] = isSelected(granularity);
    });
    const selectedGranularity = allGranularityNames.find((granularity) => isSelected(granularity));
    const granularityItems = (items, isCustom) => {
        return items.map((granularity) => {
            if (!isOpen && !isGranularitySelectedMap[granularity]) {
                return null;
            }
            const title = definedGranularitiesTitleMap
                ? definedGranularitiesTitleMap[granularity]
                : titleize(granularity);
            return (_jsx(GranularityListMember, { name: granularity, title: title, memberViewType: memberViewType, isMissing: missingGranularities.includes(granularity), isCustom: isCustom, isSelected: isGranularitySelectedMap[granularity], onToggle: () => {
                    onGranularityToggle(member.name, granularity);
                } }, `${name}.${granularity}`));
        });
    };
    const onPress = useEvent(() => {
        onToggle(!isOpen, member.name);
    });
    const filterMenu = useMemo(() => {
        const dangerProps = isFiltered
            ? {
                color: '#danger-text',
            }
            : {};
        const disabledMenuKeys = [];
        if (!isFiltered) {
            disabledMenuKeys.push('remove');
        }
        if (isDateRangeFiltered) {
            disabledMenuKeys.push('add-date-range');
        }
        return (_jsxs(MenuTrigger, { children: [_jsx(FilterByMemberButton, { isAngular: true, type: "timeDimension", isFiltered: isFiltered || false, ...(isMissing ? { color: '#danger-text' } : {}) }), _jsxs(Menu, { disabledKeys: disabledMenuKeys, onAction: (key) => {
                        switch (key) {
                            case 'add-date-range':
                                onAddDataRange?.(member.name);
                                break;
                            case 'add-filter':
                                onAddFilter?.(member.name);
                                break;
                            case 'remove':
                                onRemoveFilter?.(member.name);
                                onRemoveDataRange?.(member.name);
                                break;
                            default:
                                return;
                        }
                    }, children: [_jsx(Menu.Item, { icon: _jsx(PlusIcon, {}), children: "Filter by Date Range" }, "add-date-range"), _jsx(Menu.Item, { icon: _jsx(PlusIcon, {}), children: "Filter by This Member" }, "add-filter"), _jsx(Menu.Item, { icon: _jsx(CloseIcon, { ...dangerProps }), children: _jsx(Text, { ...dangerProps, children: "Remove all" }) }, "remove")] })] }));
    }, [
        member?.name,
        isDateRangeFiltered,
        isFiltered,
        isMissing,
        onAddDataRange,
        onRemoveDataRange,
        onAddFilter,
        onRemoveFilter,
    ]);
    return (_jsxs(_Fragment, { children: [_jsx(InstanceTooltipProvider, { name: name, fullName: member.name, type: "dimension", title: title, overflowRef: textRef, children: _jsxs(ListMemberButton, { icon: _jsx(TimeIcon, {}), "data-member": "dimension", isSelected: isTimestampSelected && !isOpen, mods: { missing: isMissing }, gridColumns: "auto minmax(0, 1fr) auto", onPress: onPress, children: [_jsxs(Space, { gap: ".75x", children: [_jsx(Text, { ref: textRef, ellipsis: true, children: filterString ? (_jsx(FilteredLabel, { text: shownMemberName, filter: filterString })) : (shownMemberName) }), _jsx(ChevronIcon, { direction: isOpen ? 'top' : 'bottom', color: "var(--dimension-text-color)" })] }), _jsxs(Space, { gap: ".5x", children: [('public' in member && member.public === false) || description ? (_jsxs(Space, { gap: "1x", children: [description ? _jsx(ItemInfoIcon, { description: description }) : undefined, 'public' in member && member.public === false ? _jsx(NonPublicIcon, {}) : undefined] })) : null, member && filterMenu] })] }) }), isOpen || selectedGranularity ? (_jsxs(GranularitiesWrapper, { children: [isOpen ? (_jsx(ListMemberButton, { icon: _jsx(TimeIcon, {}), "data-member": "dimension", isSelected: isTimestampSelected, onPress: () => {
                            onDimensionToggle(member.name);
                        }, children: _jsx(Text, { ellipsis: true, children: "value" }) })) : null, granularityItems(nonPredefinedGranularityNames, true), granularityItems(PREDEFINED_GRANULARITIES), _jsx("div", { "data-element": "TimeListLine" })] })) : null] }));
}
//# sourceMappingURL=TimeListMember.js.map