import React, { useState } from 'react';
import clsx from 'clsx';
import { useDeskInboxUnread } from '../../../hooks/useDeskInboxUnread';
import { MESSAGES_PAGE_HEIGHT } from '../../../utils/messagesLayout';
import { inboxTabLabel } from '../../../utils/messaging/inboxUnread';
import { PatientsPanel } from './panels/PatientsPanel';
import { ColleaguesPanel } from './panels/ColleaguesPanel';
import { PatientMessagingToggle } from './PatientMessagingToggle';
import './DeskMessages.css';

export type DeskTab = 'inbox' | 'patients' | 'colleagues';

export interface DeskDeepLink {
    tab?: 'patients' | 'colleagues' | 'teams';
    openRequestId?: string;
    openWith?: string;
}

// The page takes the height left below its own top, measured again when anything above it moves.
// WordPress chrome under the page is not the page's to absorb, so no overflow is chased.
export const useMessagesTop = () => {
    const fitRef = React.useRef<HTMLDivElement>(null);
    React.useLayoutEffect(() => {
        const measure = () => {
            const node = fitRef.current;
            if (node) node.style.setProperty('--ak-messages-top', `${Math.max(Math.ceil(node.getBoundingClientRect().top + window.scrollY), 0)}px`);
        };
        measure();
        window.addEventListener('resize', measure);
        const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
        observer?.observe(document.body);
        return () => {
            window.removeEventListener('resize', measure);
            observer?.disconnect();
        };
    }, []);
    return fitRef;
};

const TABS: { id: DeskTab; label: string }[] = [
    { id: 'inbox', label: 'Inbox' },
    { id: 'patients', label: 'Patients' },
    { id: 'colleagues', label: 'Colleagues' },
];

// The front desk's Messages: one row of tabs, an Inbox of every conversation, and the Patients and
// Colleagues directories to start one from.
export const DeskMessages: React.FC<{ deepLink: DeskDeepLink; workspace: string | undefined }> = ({ deepLink, workspace }) => {
    const opensColleagueDirectory = deepLink.tab === 'colleagues' && !!deepLink.openWith && !deepLink.openRequestId;
    const [tab, setTab] = useState<DeskTab>(opensColleagueDirectory ? 'colleagues' : 'inbox');
    // A deep link opens once; returning to a tab later must not reopen it.
    const [pending, setPending] = useState(deepLink);
    const unread = useDeskInboxUnread();
    const fitRef = useMessagesTop();

    return (
        <div ref={fitRef} className={clsx(MESSAGES_PAGE_HEIGHT, 'ahr-desk-page')}>
            <section className="ahr-desk-msgs" aria-labelledby="desk-messages-title">
                <h1 id="desk-messages-title" className="ahr-view-title ahr-desk-msgs__title">Messages</h1>
                <PatientMessagingToggle workspace={workspace} />
                <div className="ahr-desk-msgs__tabs ak-tabs ak-tabs--line" role="tablist" aria-label="Messages">
                    {TABS.map(({ id, label }) => (
                        <button
                            key={id}
                            type="button"
                            role="tab"
                            aria-selected={tab === id}
                            aria-controls="staff-messages-panel"
                            className="ahr-desk-msgs__tab ak-tab"
                            onClick={() => { setTab(id); setPending({}); }}
                        >
                            {id === 'inbox' ? inboxTabLabel(label, unread) : label}
                        </button>
                    ))}
                </div>
                <div className="ahr-desk-msgs__panel" id="staff-messages-panel" role="tabpanel">
                    {tab === 'colleagues' ? (
                        <ColleaguesPanel
                            view="directory"
                            initialOpenWith={opensColleagueDirectory ? pending.openWith : undefined}
                        />
                    ) : (
                        <PatientsPanel
                            view={tab === 'inbox' ? 'inbox' : 'directory'}
                            initialOpenRequestId={pending.tab === 'patients' ? pending.openRequestId : undefined}
                            initialOpenWith={pending.tab === 'patients' ? pending.openWith : undefined}
                            initialOpenColleagueRequestId={pending.tab === 'colleagues' ? pending.openRequestId : undefined}
                        />
                    )}
                </div>
            </section>
        </div>
    );
};

export default DeskMessages;