import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { useState } from 'react';
import { FanIcon } from '../../../lib/icons/Fan.js';
import { OffIcon } from '../../../lib/icons/Off.js';
import { DeviceImage } from '../../../lib/ui/device/DeviceImage.js';
import { ClimateSettingStatus } from '../../../lib/ui/thermostat/ClimateSettingStatus.js';
import { Temperature } from '../../../lib/ui/thermostat/Temperature.js';
export function ThermostatCard({ device }) {
    return (_jsx("div", { className: 'seam-thermostat-card', children: _jsx(Content, { device: device }) }));
}
function Content(props) {
    const { device } = props;
    const [temperatureUnit, setTemperatureUnit] = useState('fahrenheit');
    const toggleTemperatureUnit = () => {
        setTemperatureUnit(temperatureUnit === 'fahrenheit' ? 'celsius' : 'fahrenheit');
    };
    const { temperature_fahrenheit: temperatureFahrenheit, temperature_celsius: temperatureCelsius, current_climate_setting: currentClimateSetting, is_fan_running: isFanRunning, relative_humidity: relativeHumidity, } = device.properties;
    const systemStatus = getSystemStatus(device.properties);
    return (_jsxs("div", { className: 'seam-thermostat-card-content', children: [_jsx("div", { className: 'seam-thermostat-card-image-wrap', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-thermostat-card-details', children: [_jsxs("div", { className: 'seam-thermostat-heading-wrap', children: [_jsx("h4", { className: 'seam-thermostat-card-heading', children: device.properties.name }), _jsx("button", { onClick: toggleTemperatureUnit, className: 'seam-thermostat-temperature-toggle', children: _jsx("span", { className: 'seam-thermostat-temperature-toggle-label', children: temperatureUnit === 'fahrenheit' ? t.fahrenheit : t.celsius }) })] }), _jsx("div", { className: 'seam-thermostat-properties-wrap', children: _jsxs("div", { className: 'seam-thermostat-properties', children: [_jsx("div", { className: 'seam-thermostat-property-block', children: _jsxs("p", { className: 'seam-thermostat-property-label', children: [t.temperature, ":"] }) }), _jsxs("div", { className: 'seam-thermostat-property-block', children: [_jsx("p", { className: 'seam-thermostat-property-value', children: _jsx(Temperature, { fahrenheit: temperatureFahrenheit, celsius: temperatureCelsius, unit: temperatureUnit }) }), _jsx("p", { className: 'seam-thermostat-property-value', children: "|" }), _jsxs("p", { className: 'seam-thermostat-property-label', children: [t.humidity, ":"] }), _jsxs("p", { className: 'seam-thermostat-property-value', children: [relativeHumidity * 100, "%"] })] }), _jsx("div", { className: 'seam-thermostat-property-block', children: _jsxs("p", { className: 'seam-thermostat-property-label', children: [t.setting, ":"] }) }), _jsx("div", { className: 'seam-thermostat-property-block', children: _jsx(ClimateSettingStatus, { climateSetting: currentClimateSetting, temperatureUnit: temperatureUnit }) }), _jsx("div", { className: 'seam-thermostat-property-block', children: _jsxs("p", { className: 'seam-thermostat-property-label', children: [t.fanMode, ":"] }) }), _jsxs("div", { className: 'seam-thermostat-property-block seam-thermostat-property-icon-block', children: [_jsx("div", { className: 'seam-thermostat-property-icon', children: isFanRunning ? _jsx(FanIcon, {}) : _jsx(OffIcon, {}) }), _jsx("p", { className: 'seam-thermostat-property-value', children: isFanRunning ? t.auto : t.off })] }), _jsx("div", { className: 'seam-thermostat-property-block', children: _jsxs("p", { className: 'seam-thermostat-property-label', children: [t.systemStatus, ":"] }) }), _jsx("div", { className: 'seam-thermostat-property-block', children: _jsx("div", { className: classNames('seam-thermostat-property-tag', `seam-thermostat-property-tag-${systemStatus}`), children: _jsx("p", { className: 'seam-thermostat-property-tag-label', children: systemStatus === 'off' ? '--' : t[systemStatus] }) }) })] }) })] })] }));
}
function getSystemStatus(properties) {
    const { is_heating: isHeating, is_cooling: isCooling, is_fan_running: isFanRunning, } = properties;
    if (isHeating)
        return 'heating';
    if (isCooling)
        return 'cooling';
    if (isFanRunning)
        return 'fan';
    return 'off';
}
const t = {
    fahrenheit: '˚F',
    celsius: '˚C',
    auto: 'Auto',
    off: 'Off',
    temperature: 'Temperature',
    humidity: 'Humidity',
    setting: 'Setting',
    fanMode: 'Fan mode',
    systemStatus: 'System status',
    cooling: 'Cooling',
    heating: 'Heating',
    fan: 'Fan only',
};
//# sourceMappingURL=ThermostatCard.js.map