import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from 'classnames';
import { useState } from 'react';
import { getErrorMessage } from '../../../lib/errors.js';
import { AddIcon } from '../../../lib/icons/Add.js';
import { EditIcon } from '../../../lib/icons/Edit.js';
import { FanIcon } from '../../../lib/icons/Fan.js';
import { ThermostatCoolIcon } from '../../../lib/icons/ThermostatCool.js';
import { ThermostatHeatIcon } from '../../../lib/icons/ThermostatHeat.js';
import { TrashIcon } from '../../../lib/icons/Trash.js';
import { getTemperatureUnitSymbol } from '../../../lib/seam/thermostats/unit-conversion.js';
import { useDeleteThermostatClimatePreset } from '../../../lib/seam/thermostats/use-delete-thermostat-climate-preset.js';
import { Button } from '../../../lib/ui/Button.js';
import { IconButton } from '../../../lib/ui/IconButton.js';
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
import { Popover } from '../../../lib/ui/Popover/Popover.js';
import { PopoverContentPrompt } from '../../../lib/ui/Popover/PopoverContentPrompt.js';
import { Snackbar } from '../../../lib/ui/Snackbar/Snackbar.js';
import { Spinner } from '../../../lib/ui/Spinner/Spinner.js';
import { ClimatePreset } from '../../../lib/ui/thermostat/ClimatePreset.js';
const CreateNewPresetSymbol = Symbol('CreateNewPreset');
export function ClimatePresets(props) {
    const { device, onBack } = props;
    const [selectedClimatePreset, setSelectedClimatePreset] = useState(null);
    const [climatePresetKeySelectedForDeletion, setClimatePresetKeySelectedForDeletion,] = useState(null);
    const { mutate, isError, error, isPending } = useDeleteThermostatClimatePreset();
    const errorMessage = getErrorMessage(error);
    if (selectedClimatePreset != null ||
        selectedClimatePreset === CreateNewPresetSymbol) {
        return (_jsx(ClimatePreset, { onBack: () => {
                setSelectedClimatePreset(null);
            }, device: device, preset: selectedClimatePreset === CreateNewPresetSymbol
                ? undefined
                : selectedClimatePreset }));
    }
    return (_jsxs(_Fragment, { children: [_jsx(Snackbar, { message: errorMessage, variant: 'error', visible: isError, automaticVisibility: true }), _jsxs("div", { className: 'seam-thermostat-climate-presets', children: [_jsx(ContentHeader, { title: t.title, onBack: onBack }), _jsxs("div", { className: 'seam-thermostat-climate-presets-body', children: [_jsxs(Button, { onClick: () => {
                                    setSelectedClimatePreset(CreateNewPresetSymbol);
                                }, className: 'seam-climate-presets-add-button', children: [_jsx(AddIcon, {}), t.createNew] }), _jsx("div", { className: 'seam-thermostat-climate-presets-cards', children: device.properties.available_climate_presets.map((preset) => (_jsx(PresetCard, { onClickEdit: () => {
                                        setSelectedClimatePreset(preset);
                                    }, onClickDelete: () => {
                                        setClimatePresetKeySelectedForDeletion(preset.climate_preset_key);
                                        mutate({
                                            climate_preset_key: preset.climate_preset_key,
                                            device_id: device.device_id,
                                        });
                                    }, temperatureUnit: props.temperatureUnit, preset: preset, deletionLoading: isPending &&
                                        climatePresetKeySelectedForDeletion ===
                                            preset.climate_preset_key, disabled: isPending &&
                                        climatePresetKeySelectedForDeletion !==
                                            preset.climate_preset_key }, preset.climate_preset_key))) })] })] })] }));
}
function PresetCard(props) {
    const { preset, temperatureUnit, onClickEdit, onClickDelete, deletionLoading = false, disabled = false, ...attrs } = props;
    const heatPoint = temperatureUnit === 'fahrenheit'
        ? preset.heating_set_point_fahrenheit
        : (preset.heating_set_point_celsius ?? undefined);
    const coolPoint = temperatureUnit === 'fahrenheit'
        ? preset.cooling_set_point_fahrenheit
        : (preset.cooling_set_point_celsius ?? undefined);
    const unitSymbol = getTemperatureUnitSymbol(temperatureUnit);
    return (_jsxs("div", { ...attrs, className: classNames('seam-thermostat-climate-presets-card', attrs.className), children: [_jsxs("div", { className: 'seam-thermostat-climate-presets-card-top', children: [_jsxs("div", { className: 'seam-thermostat-climate-presets-card-name', children: [preset.display_name, preset.name != null && (_jsx("div", { className: 'seam-thermostat-climate-presets-card-name-key', children: preset.climate_preset_key }))] }), _jsxs("div", { className: 'seam-thermostat-climate-presets-card-buttons', children: [_jsx(IconButton, { disabled: disabled || deletionLoading || !preset.can_edit, onClick: onClickEdit, title: t.edit, children: _jsx(EditIcon, {}) }), _jsx(Popover, { content: ({ hide }) => (_jsx(PopoverContentPrompt, { onCancel: hide, onConfirm: () => {
                                        onClickDelete();
                                        hide();
                                    } })), children: ({ setRef }) => (_jsx(IconButton, { elRef: setRef, disabled: disabled || !preset.can_delete, title: t.delete, children: deletionLoading ? _jsx(Spinner, { size: 'small' }) : _jsx(TrashIcon, {}) })) })] })] }), _jsxs("div", { className: 'seam-thermostat-climate-presets-card-body', children: [heatPoint != null && (_jsx(Chip, { icon: _jsx(ThermostatHeatIcon, {}), text: `${heatPoint} ${unitSymbol}` })), coolPoint != null && (_jsx(Chip, { icon: _jsx(ThermostatCoolIcon, {}), text: `${coolPoint} ${unitSymbol}` })), preset.fan_mode_setting != null && (_jsx(Chip, { icon: _jsx(FanIcon, {}), text: preset.fan_mode_setting }))] })] }));
}
function Chip({ icon, text }) {
    return (_jsxs("div", { className: 'seam-thermostat-climate-preset-chip', children: [_jsx("span", { className: 'seam-thermostat-climate-preset-chip-icon', children: icon }), _jsx("span", { className: 'seam-thermostat-climate-preset-chip-value', children: text })] }));
}
const t = {
    title: 'Climate Presets',
    createNew: 'Create New',
    delete: 'Delete',
    edit: 'Edit',
    climatePresetNotFound: 'Climate Preset not found.',
};
//# sourceMappingURL=ClimatePresets.js.map