import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { formatTimeZone, getSupportedTimeZones, getSystemTimeZone, } 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 === getSystemTimeZone();
    const isManualTimeZoneSelected = !isBrowserTimeZoneSelected || manualTimeZoneEnabled;
    useEffect(() => {
        if (onManualTimeZoneSelected != null)
            onManualTimeZoneSelected(isManualTimeZoneSelected);
    }, [isManualTimeZoneSelected, onManualTimeZoneSelected]);
    const handleChangeManualTimeZone = (enabled) => {
        setManualTimeZoneEnabled(enabled);
        if (!enabled) {
            onChange(getSystemTimeZone());
        }
    };
    return (_jsxs("div", { className: 'seam-time-zone-picker', children: [_jsx(Checkbox, { label: t.setTimeZoneManuallyLabel, checked: !isManualTimeZoneSelected, onChange: (manual) => {
                    handleChangeManualTimeZone(!manual);
                }, className: 'seam-manual-time-zone-checkbox' }), _jsx("select", { value: value, onChange: handleString(onChange), className: 'seam-time-zone-select', children: getSupportedTimeZones().map((timeZone) => (_jsx("option", { value: timeZone, children: formatTimeZone(timeZone) }, timeZone))) })] }));
}
const t = {
    utc: 'UTC',
    setTimeZoneManuallyLabel: 'Use local time zone',
};
//# sourceMappingURL=TimeZonePicker.js.map