import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PlusOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { Fragment, useState } from 'react';
import styled from 'styled-components';
import { SectionRow } from '../components';
import { ButtonDropdown } from './ButtonDropdown';
import MemberDropdown from './MemberDropdown';
import MissingMemberTooltip from './MissingMemberTooltip';
import RemoveButtonGroup from './RemoveButtonGroup';
import { TimeDateRangeSelector } from './TimeRangeSelector';
const Label = styled.div `
  color: var(--dark-04-color);
  line-height: 32px;
`;
const DateRanges = [
    { title: 'Custom', value: 'custom' },
    { title: 'All time', value: undefined },
    { value: 'Today' },
    { value: 'Yesterday' },
    { value: 'This week' },
    { value: 'This month' },
    { value: 'This quarter' },
    { value: 'This year' },
    { value: 'Last 7 days' },
    { value: 'Last 30 days' },
    { value: 'Last week' },
    { value: 'Last month' },
    { value: 'Last quarter' },
    { value: 'Last year' },
];
const TimeGroup = ({ members = [], disabled = false, availableMembers, missingMembers, addMemberName, updateMethods, parsedDateRange, }) => {
    const [shown, setShown] = useState(false);
    const [granularityShown, setGranularityShown] = useState(false);
    const isCustomDateRange = Array.isArray(members[0]?.dateRange);
    const [isRangePickerVisible, toggleRangePicker] = useState(false);
    function onDateRangeSelect(m, dateRange) {
        if (dateRange && !dateRange.some((d) => !d)) {
            updateMethods.update(m, {
                ...m,
                dateRange,
            });
        }
    }
    const granularityMenu = (member, onClick) => (_jsx("div", { className: "test simple-overlay", children: _jsx(Menu, { className: "ant-dropdown-menu ant-dropdown-menu-root", children: member.granularities.length ? (member.granularities.map((m) => (_jsx(Menu.Item, { className: "ant-dropdown-menu-item", onClick: () => onClick(m), children: m.title }, m.title)))) : (_jsx(Menu.Item, { disabled: true, children: "No members found" })) }) }));
    const dateRangeMenu = (onClick) => (_jsx("div", { className: "test simple-overlay", children: _jsx(Menu, { className: "ant-dropdown-menu ant-dropdown-menu-root", children: DateRanges.map((m) => (_jsx(Menu.Item, { className: "ant-dropdown-menu-item", onClick: () => onClick(m), children: m.title || m.value }, m.title || m.value))) }) }));
    return (_jsxs(SectionRow, { children: [members.map((m, index) => {
                const isMissing = missingMembers.includes(m.dimension.title);
                const buttonGroup = (_jsx(RemoveButtonGroup, { disabled: disabled, className: disabled ? 'disabled' : null, color: isMissing ? 'danger' : 'primary', onRemoveClick: () => updateMethods.remove(m), children: _jsx(MemberDropdown, { "data-testid": "TimeDimension", disabled: disabled, availableCubes: availableMembers, onClick: (updateWith) => updateMethods.update(m, { ...m, dimension: updateWith }), children: m.dimension.title }) }));
                return (_jsxs(Fragment, { children: [isMissing ? (_jsx(MissingMemberTooltip, { children: buttonGroup })) : (buttonGroup), _jsx(Label, { children: "for" }), _jsx(ButtonDropdown, { show: shown, disabled: disabled, overlay: dateRangeMenu((dateRange) => {
                                if (dateRange.value === 'custom') {
                                    toggleRangePicker(true);
                                }
                                else {
                                    updateMethods.update(m, {
                                        ...m,
                                        dateRange: dateRange.value,
                                    });
                                    toggleRangePicker(false);
                                }
                            }), onOverlayOpen: () => setShown(true), onOverlayClose: () => setShown(false), onItemClick: () => setShown(false), children: isRangePickerVisible || isCustomDateRange
                                ? 'Custom'
                                : m.dateRange || 'All time' }), isRangePickerVisible || isCustomDateRange ? (_jsx(TimeDateRangeSelector, { value: parsedDateRange || [], onChange: (dateRange) => {
                                onDateRangeSelect(m, dateRange);
                            } })) : null, _jsx(Label, { children: "by" }), _jsx(ButtonDropdown, { show: granularityShown, disabled: disabled, overlay: granularityMenu(m.dimension, (granularity) => updateMethods.update(m, { ...m, granularity: granularity.name })), onOverlayOpen: () => setGranularityShown(true), onOverlayClose: () => setGranularityShown(false), onItemClick: () => setGranularityShown(false), children: m.dimension.granularities.find((g) => g.name === m.granularity) &&
                                m.dimension.granularities.find((g) => g.name === m.granularity)
                                    .title })] }, index));
            }), !members.length && (_jsx(MemberDropdown, { "data-testid": "TimeDimension", disabled: disabled, availableCubes: availableMembers, type: "dashed", icon: _jsx(PlusOutlined, {}), onClick: (member) => updateMethods.add({ dimension: member, granularity: 'day' }), children: addMemberName }))] }));
};
export default TimeGroup;
//# sourceMappingURL=TimeGroup.js.map