import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import { debounce } from '../../../../lib/debounce.js';
import { CheckBlackIcon } from '../../../../lib/icons/CheckBlack.js';
import { DeviceInfo } from '../../../../lib/seam/components/DeviceDetails/DeviceInfo.js';
import { useCoolThermostat } from '../../../../lib/seam/thermostats/use-cool-thermostat.js';
import { useHeatCoolThermostat } from '../../../../lib/seam/thermostats/use-heat-cool-thermostat.js';
import { useHeatThermostat } from '../../../../lib/seam/thermostats/use-heat-thermostat.js';
import { useSetThermostatFanMode } from '../../../../lib/seam/thermostats/use-set-thermostat-fan-mode.js';
import { useSetThermostatOff } from '../../../../lib/seam/thermostats/use-set-thermostat-off.js';
import { Button } from '../../../../lib/ui/Button.js';
import { AccordionRow } from '../../../../lib/ui/layout/AccordionRow.js';
import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
import { DetailRow } from '../../../../lib/ui/layout/DetailRow.js';
import { DetailSection } from '../../../../lib/ui/layout/DetailSection.js';
import { DetailSectionGroup } from '../../../../lib/ui/layout/DetailSectionGroup.js';
import { Snackbar } from '../../../../lib/ui/Snackbar/Snackbar.js';
import { ClimateModeMenu } from '../../../../lib/ui/thermostat/ClimateModeMenu.js';
import { ClimatePresets } from '../../../../lib/ui/thermostat/ClimatePresets.js';
import { ClimateSettingStatus } from '../../../../lib/ui/thermostat/ClimateSettingStatus.js';
import { FanModeMenu } from '../../../../lib/ui/thermostat/FanModeMenu.js';
import { TemperatureControlGroup } from '../../../../lib/ui/thermostat/TemperatureControlGroup.js';
import { ThermostatCard } from '../../../../lib/ui/thermostat/ThermostatCard.js';
export function ThermostatDeviceDetails({ device, disableResourceIds, disableConnectedAccountInformation, onBack, className, onEditName, }) {
    const [temperatureUnit, setTemperatureUnit] = useState('fahrenheit');
    const [climateSettingsVisible, setClimateSettingsVisible] = useState(false);
    if (device == null) {
        return null;
    }
    if (climateSettingsVisible) {
        return (_jsx(ClimatePresets, { device: device, temperatureUnit: temperatureUnit, onBack: () => {
                setClimateSettingsVisible(false);
            } }));
    }
    return (_jsxs("div", { className: classNames('seam-device-details', className), children: [_jsx(ContentHeader, { title: t.thermostat, onBack: onBack }), _jsxs("div", { className: 'seam-body', children: [_jsx(ThermostatCard, { onTemperatureUnitChange: setTemperatureUnit, device: device, onEditName: onEditName }), _jsx("div", { className: 'seam-thermostat-device-details', children: _jsxs(DetailSectionGroup, { children: [_jsxs(DetailSection, { label: t.currentSettings, tooltipContent: t.currentSettingsTooltip, children: [_jsx(ClimateSettingRow, { device: device }), _jsx(ClimatePresetRow, { onClickManage: () => {
                                                setClimateSettingsVisible(true);
                                            }, device: device }), _jsx(FanModeRow, { device: device })] }), _jsx(DeviceInfo, { device: device, disableConnectedAccountInformation: disableConnectedAccountInformation, disableResourceIds: disableResourceIds })] }) })] })] }));
}
function FanModeRow({ device }) {
    const { mutate, isSuccess, isError } = useSetThermostatFanMode();
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'seam-detail-row-wrap', children: _jsx(DetailRow, { label: t.fanMode, children: _jsx(FanModeMenu, { mode: device.properties.fan_mode_setting, onChange: (fanMode) => {
                            mutate({
                                device_id: device.device_id,
                                fan_mode_setting: fanMode,
                            });
                        } }) }) }), _jsx(Snackbar, { message: t.fanModeSuccess, variant: 'success', visible: isSuccess, automaticVisibility: true, autoDismiss: true }), _jsx(Snackbar, { message: t.fanModeError, variant: 'error', visible: isError, automaticVisibility: true })] }));
}
function ClimateSettingRow({ device, }) {
    const deviceHeatValue = device.properties.current_climate_setting.heating_set_point_fahrenheit;
    const deviceCoolValue = device.properties.current_climate_setting.cooling_set_point_fahrenheit;
    const availableHvacModes = device.properties.available_hvac_mode_settings;
    const [showSuccess, setShowSuccess] = useState(false);
    const [mode, setMode] = useState((availableHvacModes.includes('heat_cool')
        ? 'heat_cool'
        : availableHvacModes[0]) ?? 'off');
    const [heatValue, setHeatValue] = useState(device.properties.current_climate_setting.heating_set_point_fahrenheit ?? 0);
    const [coolValue, setCoolValue] = useState(device.properties.current_climate_setting.cooling_set_point_fahrenheit ?? 0);
    const { mutate: heatCoolThermostat, isSuccess: isHeatCoolSuccess, isError: isHeatCoolError, } = useHeatCoolThermostat();
    const { mutate: heatThermostat, isSuccess: isHeatSuccess, isError: isHeatError, } = useHeatThermostat();
    const { mutate: coolThermostat, isSuccess: isCoolSuccess, isError: isCoolError, } = useCoolThermostat();
    const { mutate: setThermostatOff, isSuccess: isSetOffSuccess, isError: isSetOffError, } = useSetThermostatOff();
    useEffect(() => {
        const handler = debounce(() => {
            switch (mode) {
                case 'heat_cool':
                    heatCoolThermostat({
                        device_id: device.device_id,
                        heating_set_point_fahrenheit: heatValue,
                        cooling_set_point_fahrenheit: coolValue,
                    });
                    break;
                case 'heat':
                    heatThermostat({
                        device_id: device.device_id,
                        heating_set_point_fahrenheit: heatValue,
                    });
                    break;
                case 'cool':
                    coolThermostat({
                        device_id: device.device_id,
                        cooling_set_point_fahrenheit: coolValue,
                    });
                    break;
                case 'off':
                    setThermostatOff({
                        device_id: device.device_id,
                    });
                    break;
            }
        }, 2000);
        if (heatValue !== deviceHeatValue ||
            coolValue !== deviceCoolValue ||
            mode === 'off') {
            handler();
        }
        return () => {
            handler.cancel();
        };
    }, [
        heatValue,
        coolValue,
        mode,
        deviceHeatValue,
        deviceCoolValue,
        device,
        heatThermostat,
        coolThermostat,
        heatCoolThermostat,
        setThermostatOff,
    ]);
    useEffect(() => {
        if (isHeatCoolSuccess ||
            isHeatSuccess ||
            isCoolSuccess ||
            isSetOffSuccess) {
            setShowSuccess(true);
            const timeout = globalThis.setTimeout(() => {
                setShowSuccess(false);
            }, 3000);
            return () => {
                globalThis.clearTimeout(timeout);
            };
        }
        return () => { };
    }, [isHeatCoolSuccess, isHeatSuccess, isCoolSuccess, isSetOffSuccess]);
    return (_jsxs(_Fragment, { children: [_jsx(AccordionRow, { label: t.climate, leftContent: _jsxs("div", { className: classNames('seam-thermostat-mutation-status', {
                        'is-visible': showSuccess,
                    }), children: [_jsx("div", { className: 'seam-thermostat-mutation-status-icon', children: _jsx(CheckBlackIcon, {}) }), _jsx("div", { className: 'seam-thermostat-mutation-status-label', children: t.saved })] }), rightCollapsedContent: _jsx(ClimateSettingStatus, { climateSetting: device.properties.current_climate_setting, temperatureUnit: 'fahrenheit', iconPlacement: 'right' }), children: _jsxs("div", { className: 'seam-detail-row-end-alignment', children: [mode !== 'off' && (_jsx(TemperatureControlGroup, { mode: mode, heatValue: heatValue, coolValue: coolValue, onHeatValueChange: setHeatValue, onCoolValueChange: setCoolValue, delta: Number('min_heating_cooling_delta_fahrenheit' in device.properties &&
                                device.properties.min_heating_cooling_delta_fahrenheit) ?? 0 })), _jsx(ClimateModeMenu, { mode: mode, onChange: setMode, supportedModes: availableHvacModes })] }) }), _jsx(Snackbar, { message: t.climateSettingError, variant: 'error', visible: isHeatCoolError || isHeatError || isCoolError || isSetOffError, automaticVisibility: true })] }));
}
function ClimatePresetRow({ device, onClickManage, }) {
    return (_jsx(DetailRow, { label: t.climatePresets, children: _jsx(Button, { onClick: onClickManage, children: t.manageNPresets((device.properties.available_climate_presets ?? []).length) }) }));
}
const t = {
    thermostat: 'Thermostat',
    currentSettings: 'Current settings',
    currentSettingsTooltip: 'These are the settings currently on the device. If you change them here, they change on the device.',
    climate: 'Climate',
    climatePresets: 'Climate presets',
    fanMode: 'Fan mode',
    none: 'None',
    fanModeSuccess: 'Successfully updated fan mode!',
    fanModeError: 'Error updating fan mode. Please try again.',
    climateSettingError: 'Error updating climate setting. Please try again.',
    saved: 'Saved',
    manageNPresets: (n) => `Manage (${n} Preset${n <= 1 ? '' : 's'})`,
};
//# sourceMappingURL=ThermostatDeviceDetails.js.map