1  import { SxProps, Theme, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 2  
 3  export const supportedTimeRangeOptions = ['1m', '3m', '6m', '1y'] as const;
 4  
 5  export enum ESupportedTimeRanges {
 6    OneMonth = '1m',
 7    ThreeMonths = '3m',
 8    SixMonths = '6m',
 9    OneYear = '1y',
10    TwoYears = '2y',
11    FiveYears = '5y',
12  }
13  
14  export interface TimeRangeSelectorProps {
15    disabled?: boolean;
16    timeRanges: ESupportedTimeRanges[];
17    selectedTimeRange: ESupportedTimeRanges;
18    onTimeRangeChanged: (value: ESupportedTimeRanges) => void;
19    sx?: {
20      buttonGroup: SxProps<Theme>;
21      button: SxProps<Theme>;
22    };
23  }
24  
25  export const TimeRangeSelector = ({
26    disabled = false, // support default fallback
27    timeRanges,
28    selectedTimeRange,
29    onTimeRangeChanged,
30    ...props
31  }: TimeRangeSelectorProps) => {
32    const handleChange = (
33      _event: React.MouseEvent<HTMLElement>,
34      newInterval: ESupportedTimeRanges
35    ) => {
36      if (newInterval !== null) {
37        // Invoke callback
38        onTimeRangeChanged(newInterval);
39      }
40    };
41  
42    return (
43      <ToggleButtonGroup
44        disabled={disabled}
45        value={selectedTimeRange}
46        exclusive
47        onChange={handleChange}
48        aria-label="Date range"
49        sx={{
50          height: '24px',
51          '&.MuiToggleButtonGroup-grouped': {
52            borderRadius: 'unset',
53          },
54          ...props.sx?.buttonGroup,
55        }}
56      >
57        {timeRanges.map((interval) => {
58          return (
59            <ToggleButton
60              key={interval}
61              value={interval}
62              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
63              // @ts-ignore
64              sx={(theme): SxProps<Theme> | undefined => ({
65                '&.MuiToggleButtonGroup-grouped:not(.Mui-selected), &.MuiToggleButtonGroup-grouped&.Mui-disabled':
66                  {
67                    border: '0.5px solid transparent',
68                    backgroundColor: 'background.surface',
69                    color: 'action.disabled',
70                  },
71                '&.MuiToggleButtonGroup-grouped&.Mui-selected': {
72                  borderRadius: '4px',
73                  border: `0.5px solid ${theme.palette.divider}`,
74                  boxShadow: '0px 2px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.25)',
75                  backgroundColor: 'background.paper',
76                },
77                ...props.sx?.button,
78              })}
79            >
80              <Typography variant="buttonM">{interval}</Typography>
81            </ToggleButton>
82          );
83        })}
84      </ToggleButtonGroup>
85    );
86  };