import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from 'classnames';
import { useCallback, useMemo, useState } from 'react';
import { useComponentTelemetry } from '../../../../lib/telemetry/index.js';
import { compareByCreatedAtDesc } from '../../../../lib/dates.js';
import { NestedClimateSettingScheduleDetails } from '../../../../lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.js';
import { ClimateSettingScheduleRow } from '../../../../lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRow.js';
import { withRequiredCommonProps, } from '../../../../lib/seam/components/common-props.js';
import { useClimateSettingSchedules, } from '../../../../lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js';
import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
import { EmptyPlaceholder } from '../../../../lib/ui/Table/EmptyPlaceholder.js';
import { TableBody } from '../../../../lib/ui/Table/TableBody.js';
import { TableHeader } from '../../../../lib/ui/Table/TableHeader.js';
import { TableTitle } from '../../../../lib/ui/Table/TableTitle.js';
import { SearchTextField } from '../../../../lib/ui/TextField/SearchTextField.js';
import { Caption } from '../../../../lib/ui/typography/Caption.js';
export const NestedClimateSettingScheduleTable = withRequiredCommonProps(ClimateSettingScheduleTable);
const defaultClimateSettingScheduleFilter = (climateSettingSchedule, searchInputValue) => {
    const value = searchInputValue.trim().toLowerCase();
    if (value === '')
        return true;
    const name = climateSettingSchedule.name ?? '';
    return name.trim().toLowerCase().includes(value);
};
export function ClimateSettingScheduleTable({ deviceId, disableSearch = false, onClimateSettingScheduleClick = () => { }, preventDefaultOnClimateSettingScheduleClick = false, climateSettingScheduleFilter = defaultClimateSettingScheduleFilter, climateSettingScheduleComparator = compareByCreatedAtDesc, heading = t.climateSettingSchedules, disableLockUnlock = false, disableDeleteAccessCode = false, onBack, className, disableCreateAccessCode, disableEditAccessCode, }) {
    useComponentTelemetry('ClimateSettingScheduleTable');
    const { climateSettingSchedules, isLoading, isError, error } = useClimateSettingSchedules({
        device_id: deviceId,
    });
    const [searchInputValue, setSearchInputValue] = useState('');
    const [selectedViewClimateSettingScheduleId, setSelectedViewClimateSettingScheduleId,] = useState(null);
    const filteredClimateSettingSchedules = useMemo(() => climateSettingSchedules
        ?.filter((schedule) => climateSettingScheduleFilter(schedule, searchInputValue))
        ?.sort(climateSettingScheduleComparator) ?? [], [
        climateSettingSchedules,
        searchInputValue,
        climateSettingScheduleFilter,
        climateSettingScheduleComparator,
    ]);
    const handleClimateSettingScheduleClick = useCallback((climateSettingScheduleId) => {
        onClimateSettingScheduleClick(climateSettingScheduleId);
        if (preventDefaultOnClimateSettingScheduleClick)
            return;
        setSelectedViewClimateSettingScheduleId(climateSettingScheduleId);
    }, [
        onClimateSettingScheduleClick,
        preventDefaultOnClimateSettingScheduleClick,
        setSelectedViewClimateSettingScheduleId,
    ]);
    if (selectedViewClimateSettingScheduleId != null) {
        return (_jsx(NestedClimateSettingScheduleDetails, { climateSettingScheduleId: selectedViewClimateSettingScheduleId, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onBack: () => {
                setSelectedViewClimateSettingScheduleId(null);
            }, className: className }));
    }
    if (isLoading) {
        return _jsx("p", { className: className, children: "..." });
    }
    if (isError) {
        return _jsx("p", { className: className, children: error?.message });
    }
    return (_jsxs("div", { className: classNames('seam-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [heading != null ? (_jsxs(TableTitle, { children: [heading ?? t.climateSettingSchedules, ' ', _jsxs(Caption, { children: ["(", filteredClimateSettingSchedules.length, ")"] })] })) : (_jsx("div", { className: 'seam-fragment' })), !disableSearch && (_jsx(SearchTextField, { value: searchInputValue, onChange: setSearchInputValue, disabled: (climateSettingSchedules?.length ?? 0) === 0 }))] }), _jsx(TableBody, { children: _jsx(Content, { climateSettingSchedules: filteredClimateSettingSchedules, onClimateSettingScheduleClick: handleClimateSettingScheduleClick }) })] }));
}
function Content(props) {
    const { climateSettingSchedules, onClimateSettingScheduleClick } = props;
    if (climateSettingSchedules.length === 0) {
        return (_jsx(EmptyPlaceholder, { children: t.noClimateSettingSchedulesMessage }));
    }
    return (_jsx(_Fragment, { children: climateSettingSchedules.map((schedule) => (_jsx(ClimateSettingScheduleRow, { climateSettingSchedule: schedule, onClick: () => {
                onClimateSettingScheduleClick(schedule.climate_setting_schedule_id);
            } }, schedule.climate_setting_schedule_id))) }));
}
const t = {
    climateSettingSchedules: 'Climate setting schedules',
    noClimateSettingSchedulesMessage: 'Sorry, no climate setting schedules were found',
};
//# sourceMappingURL=ClimateSettingScheduleTable.js.map