1import React, { useCallback } from 'react';
2import { SelectableValue } from '@grafana/data';
3import { Select } from '../Select/Select';
4import { selectors } from '@grafana/e2e-selectors';
5
6export interface Props {
7  onChange: (weekStart: string) => void;
8  value: string;
9  width?: number;
10  autoFocus?: boolean;
11  onBlur?: () => void;
12  includeInternal?: boolean;
13  disabled?: boolean;
14  inputId?: string;
15}
16
17const weekStarts: Array<SelectableValue<string>> = [
18  { value: '', label: 'Default' },
19  { value: 'saturday', label: 'Saturday' },
20  { value: 'sunday', label: 'Sunday' },
21  { value: 'monday', label: 'Monday' },
22];
23
24export const WeekStartPicker: React.FC<Props> = (props) => {
25  const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
26
27  const onChangeWeekStart = useCallback(
28    (selectable: SelectableValue<string>) => {
29      if (selectable.value !== undefined) {
30        onChange(selectable.value);
31      }
32    },
33    [onChange]
34  );
35
36  return (
37    <Select
38      inputId={inputId}
39      value={weekStarts.find((item) => item.value === value)?.value}
40      placeholder={selectors.components.WeekStartPicker.placeholder}
41      autoFocus={autoFocus}
42      openMenuOnFocus={true}
43      width={width}
44      options={weekStarts}
45      onChange={onChangeWeekStart}
46      onBlur={onBlur}
47      disabled={disabled}
48      menuShouldPortal={true}
49    />
50  );
51};
52