import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Controller } from 'react-hook-form';
import { useDevice } from '../../../lib/seam/devices/use-device.js';
import { Button } from '../../../lib/ui/Button.js';
import { DateTimePicker } from '../../../lib/ui/DateTimePicker/DateTimePicker.js';
import { FormField } from '../../../lib/ui/FormField.js';
import { InputLabel } from '../../../lib/ui/InputLabel.js';
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
import { TextField } from '../../../lib/ui/TextField/TextField.js';
export function ClimateSettingScheduleFormNameAndSchedule({ title, deviceId, onBack, onCancel, onNext, control, }) {
    const { device } = useDevice({
        device_id: deviceId,
    });
    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-name-and-schedule', children: _jsxs("div", { className: 'seam-content', children: [_jsxs(FormField, { children: [_jsx(InputLabel, { children: t.nameInputLabel }), _jsx(Controller, { name: 'name', control: control, defaultValue: '', render: ({ field, fieldState: { invalid, error } }) => {
                                                return (_jsx(TextField, { ...field, size: 'large', clearable: true, hasError: invalid, helperText: error?.message }));
                                            } })] }), _jsxs(FormField, { children: [_jsx(InputLabel, { children: t.startTimeLabel }), _jsx(Controller, { name: 'startDate', control: control, defaultValue: '', render: ({ field }) => (_jsx(DateTimePicker, { ...field, size: 'large' })) })] }), _jsxs(FormField, { children: [_jsx(InputLabel, { children: t.endTimeLabel }), _jsx(Controller, { name: 'endDate', control: control, defaultValue: '', render: ({ field }) => (_jsx(DateTimePicker, { ...field, size: 'large' })) })] })] }) }), _jsxs("div", { className: 'seam-actions', children: [_jsx(Button, { onClick: onCancel, children: t.cancel }), _jsx(Button, { variant: 'solid', onClick: onNext, children: t.next })] })] })] }));
}
const t = {
    nameInputLabel: 'Name the climate setting schedule',
    startTimeLabel: 'Start time',
    endTimeLabel: 'End time',
    addNewClimateSettingSchedule: 'Add a climate setting schedule',
    cancel: 'Cancel',
    save: 'Save',
    next: 'Next',
};
//# sourceMappingURL=ClimateSettingScheduleFormNameAndSchedule.js.map