import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Controller } from 'react-hook-form';
import { isThermostatDevice } from 'seamapi';
import { useDevice } from '../../../lib/seam/devices/use-device.js';
import { getSetPointBounds } from '../../../lib/set-point-bounds.js';
import { Button } from '../../../lib/ui/Button.js';
import { FormField } from '../../../lib/ui/FormField.js';
import { InputLabel } from '../../../lib/ui/InputLabel.js';
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
import { ClimateSettingControlGroup } from '../../../lib/ui/thermostat/ClimateSettingControlGroup.js';
export function ClimateSettingScheduleFormClimateSetting({ title, control, deviceId, onBack, onCancel, onSave, }) {
    const { device } = useDevice({
        device_id: deviceId,
    });
    if (device == null)
        return _jsx(_Fragment, {});
    if (!isThermostatDevice(device))
        return _jsx(_Fragment, {});
    const setPointBounds = getSetPointBounds(device.properties);
    return (_jsxs(_Fragment, { children: [_jsx(ContentHeader, { title: title, onBack: onBack, subheading: device?.properties.name }), _jsxs("div", { className: 'seam-main', children: [_jsx("div", { className: 'seam-climate-setting-schedule-form-climate-setting', children: _jsxs("div", { className: 'seam-content', children: [_jsxs("div", { children: [_jsx(InputLabel, { children: t.climateSetting }), _jsx("span", { className: 'seam-label', children: t.climateSettingSubHeading })] }), _jsx(FormContent, { control: control, setPointBounds: setPointBounds })] }) }), _jsxs("div", { className: 'seam-actions', children: [_jsx(Button, { onClick: onCancel, children: t.cancel }), _jsx(Button, { variant: 'solid', onClick: onSave, children: t.save })] })] })] }));
}
function FormContent({ control, setPointBounds, }) {
    return (_jsx(FormField, { children: _jsx(Controller, { name: 'climateSetting', control: control, render: ({ field: { value, onChange } }) => (_jsx(ClimateSettingControlGroup, { mode: value.hvacModeSetting, onModeChange: (mode) => {
                    onChange({ ...value, hvacModeSetting: mode });
                }, coolValue: value.coolingSetPoint, heatValue: value.heatingSetPoint, ...setPointBounds, onCoolValueChange: (coolingSetPoint) => {
                    onChange({
                        ...value,
                        coolingSetPoint,
                    });
                }, onHeatValueChange: (heatingSetPoint) => {
                    onChange({
                        ...value,
                        heatingSetPoint,
                    });
                } })) }) }));
}
const t = {
    climateSetting: 'Climate setting',
    climateSettingSubHeading: 'Choose mode and adjust the climate',
    cancel: 'Cancel',
    save: 'Save',
    next: 'Next',
};
//# sourceMappingURL=ClimateSettingScheduleFormClimateSetting.js.map