import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from 'classnames';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { ClimateSettingScheduleFormDeviceSelect } from '../../../lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.js';
import { ClimateSettingScheduleFormNameAndSchedule } from '../../../lib/ui/ClimateSettingForm/ClimateSettingScheduleFormNameAndSchedule.js';
export function ClimateSettingScheduleForm({ className, ...props }) {
    return (_jsx("div", { className: classNames('seam-climate-setting-schedule-form', className), children: _jsx(Content, { ...props }) }));
}
function Content({ onBack, }) {
    const { control, watch } = useForm();
    const deviceId = watch('deviceId', null);
    const [page, setPage] = useState('device_select');
    if (page === 'device_select') {
        return (_jsx(ClimateSettingScheduleFormDeviceSelect, { title: t.addNewClimateSettingSchedule, control: control, onBack: onBack, onSelect: () => {
                setPage('name_and_schedule');
            } }));
    }
    if (page === 'name_and_schedule') {
        return (_jsx(ClimateSettingScheduleFormNameAndSchedule, { title: t.addNewClimateSettingSchedule, control: control, deviceId: deviceId, onBack: () => {
                setPage('device_select');
            }, onCancel: onBack, onNext: () => {
                setPage('climate_setting');
            } }));
    }
    return _jsx(_Fragment, {});
}
export const t = {
    addNewClimateSettingSchedule: 'Add a climate setting schedule',
};
//# sourceMappingURL=ClimateSettingScheduleForm.js.map