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 { AddIcon } from '../../../../lib/icons/Add.js';
import { useAccessCodes, } from '../../../../lib/seam/access-codes/use-access-codes.js';
import { NestedAccessCodeDetails } from '../../../../lib/seam/components/AccessCodeDetails/AccessCodeDetails.js';
import { AccessCodeHealthBar, } from '../../../../lib/seam/components/AccessCodeTable/AccessCodeHealthBar.js';
import { AccessCodeRow } from '../../../../lib/seam/components/AccessCodeTable/AccessCodeRow.js';
import { withRequiredCommonProps, } from '../../../../lib/seam/components/common-props.js';
import { NestedCreateAccessCodeForm } from '../../../../lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.js';
import { NestedEditAccessCodeForm } from '../../../../lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.js';
import { IconButton } from '../../../../lib/ui/IconButton.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';
import { useToggle } from '../../../../lib/ui/use-toggle.js';
export const NestedAccessCodeTable = withRequiredCommonProps(AccessCodeTable);
const defaultAccessCodeFilter = (accessCode, searchInputValue) => {
    const value = searchInputValue.trim().toLowerCase();
    if (value === '')
        return true;
    const name = accessCode.name ?? '';
    const code = accessCode.code ?? '';
    return (name.trim().toLowerCase().includes(value) ||
        code.trim().toLowerCase().includes(value));
};
export function AccessCodeTable({ deviceId, disableSearch = false, onAccessCodeClick = () => { }, preventDefaultOnAccessCodeClick = false, onBack, accessCodeFilter = defaultAccessCodeFilter, accessCodeComparator = compareByCreatedAtDesc, heading = t.accessCodes, title = t.accessCodes, className, disableCreateAccessCode = false, disableEditAccessCode = false, disableLockUnlock = false, disableDeleteAccessCode = false, }) {
    useComponentTelemetry('AccessCodeTable');
    const { accessCodes } = useAccessCodes({
        device_id: deviceId,
    });
    const [selectedViewAccessCodeId, setSelectedViewAccessCodeId] = useState(null);
    const [searchInputValue, setSearchInputValue] = useState('');
    const [addAccessCodeFormVisible, toggleAddAccessCodeForm] = useToggle();
    const [selectedEditAccessCodeId, setSelectedEditAccessCodeId] = useState(null);
    const filteredAccessCodes = useMemo(() => accessCodes
        ?.filter((accessCode) => accessCodeFilter(accessCode, searchInputValue))
        ?.sort(accessCodeComparator) ?? [], [accessCodes, searchInputValue, accessCodeFilter, accessCodeComparator]);
    const handleAccessCodeClick = useCallback((accessCodeId) => {
        onAccessCodeClick(accessCodeId);
        if (preventDefaultOnAccessCodeClick)
            return;
        setSelectedViewAccessCodeId(accessCodeId);
    }, [
        onAccessCodeClick,
        preventDefaultOnAccessCodeClick,
        setSelectedViewAccessCodeId,
    ]);
    const handleAccessCodeEdit = useCallback((accessCodeId) => {
        setSelectedEditAccessCodeId(accessCodeId);
    }, [setSelectedEditAccessCodeId]);
    if (selectedEditAccessCodeId != null) {
        return (_jsx(NestedEditAccessCodeForm, { accessCodeId: selectedEditAccessCodeId, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onBack: () => {
                setSelectedEditAccessCodeId(null);
            }, className: className }));
    }
    if (selectedViewAccessCodeId != null) {
        return (_jsx(NestedAccessCodeDetails, { accessCodeId: selectedViewAccessCodeId, onEdit: () => {
                setSelectedEditAccessCodeId(selectedViewAccessCodeId);
            }, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onBack: () => {
                setSelectedViewAccessCodeId(null);
            }, className: className }));
    }
    if (addAccessCodeFormVisible) {
        return (_jsx(NestedCreateAccessCodeForm, { deviceId: deviceId, disableLockUnlock: disableLockUnlock, disableCreateAccessCode: disableCreateAccessCode, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onBack: toggleAddAccessCodeForm, className: className }));
    }
    return (_jsxs("div", { className: classNames('seam-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [_jsxs("div", { className: 'seam-left', children: [title != null ? (_jsxs(TableTitle, { children: [heading ?? title ?? t.accessCodes, ' ', _jsxs(Caption, { children: ["(", filteredAccessCodes.length, ")"] })] })) : (_jsx("div", { className: 'seam-fragment' })), !disableCreateAccessCode && (_jsx(IconButton, { onClick: toggleAddAccessCodeForm, className: 'seam-add-button', children: _jsx(AddIcon, {}) }))] }), !disableSearch && (_jsx(SearchTextField, { value: searchInputValue, onChange: setSearchInputValue, disabled: (accessCodes?.length ?? 0) === 0 }))] }), _jsx(TableBody, { children: _jsx(Content, { accessCodes: filteredAccessCodes, onAccessCodeClick: handleAccessCodeClick, onAccessCodeEdit: handleAccessCodeEdit, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode }) })] }));
}
function Content(props) {
    const { accessCodes, onAccessCodeClick, onAccessCodeEdit, disableEditAccessCode, disableDeleteAccessCode, } = props;
    const [filter, setFilter] = useState(null);
    const filteredAccessCodes = useMemo(() => {
        if (filter === null) {
            return accessCodes;
        }
        if (filter === 'access_code_issues') {
            return accessCodes.filter((accessCode) => {
                return accessCode.errors.length > 0 || accessCode.warnings.length > 0;
            });
        }
        return accessCodes;
    }, [accessCodes, filter]);
    if (accessCodes.length === 0) {
        return _jsx(EmptyPlaceholder, { children: t.noAccessCodesMessage });
    }
    return (_jsxs(_Fragment, { children: [_jsx(AccessCodeHealthBar, { accessCodes: accessCodes, filter: filter, onFilterSelect: setFilter }), filteredAccessCodes.map((accessCode) => (_jsx(AccessCodeRow, { accessCode: accessCode, onClick: () => {
                    onAccessCodeClick(accessCode.access_code_id);
                }, disableEditAccessCode: disableEditAccessCode, disableDeleteAccessCode: disableDeleteAccessCode, onEdit: () => {
                    onAccessCodeEdit(accessCode.access_code_id);
                } }, accessCode.access_code_id)))] }));
}
const t = {
    accessCodes: 'Access Codes',
    noAccessCodesMessage: 'Sorry, no access codes were found',
};
//# sourceMappingURL=AccessCodeTable.js.map