import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { getBrowserTimezone, getTimezoneLabel, getTimezoneOffset, getTimezones, } from '../../../lib/dates.js';
import { Checkbox } from '../../../lib/ui/Checkbox.js';
import { handleString } from '../../../lib/ui/TextField/TextField.js';
export function TimezonePicker({ onChange, value, onManualTimezoneSelected, }) {
    const [manualTimezoneEnabled, setManualTimezoneEnabled] = useState(false);
    const isBrowserTimezoneSelected = value === getBrowserTimezone();
    const isManualTimezoneSelected = !isBrowserTimezoneSelected || manualTimezoneEnabled;
    useEffect(() => {
        if (onManualTimezoneSelected != null)
            onManualTimezoneSelected(isManualTimezoneSelected);
    }, [isManualTimezoneSelected, onManualTimezoneSelected]);
    const handleChangeManualTimezone = (enabled) => {
        setManualTimezoneEnabled(enabled);
        if (!enabled) {
            onChange(getBrowserTimezone());
        }
    };
    return (_jsxs("div", { className: 'seam-timezone-picker', children: [_jsx(Checkbox, { label: t.setTimezoneManuallyLabel, checked: !isManualTimezoneSelected, onChange: (manual) => {
                    handleChangeManualTimezone(!manual);
                }, className: 'seam-manual-timezone-checkbox' }), _jsx("select", { value: value, onChange: handleString(onChange), className: 'seam-timezone-select', children: getTimezones().map((timezone) => (_jsxs("option", { value: timezone, children: [t.utc, " ", getTimezoneOffset(timezone), " ", getTimezoneLabel(timezone)] }, timezone))) })] }));
}
const t = {
    utc: 'UTC',
    setTimezoneManuallyLabel: 'Use local time zone',
};
//# sourceMappingURL=TimezonePicker.js.map