import type { CSSProperties } from 'react';
import type { Task } from 'fhir/r4';
import { CheckboxControl } from '../ui/checkbox-control';
import { readChecklist, readChecklistTicks } from '../../utils/taskChecklist';

interface TaskChecklistProps {
    task: Task;
    /** Only the patient ticks a step; staff see the same list read-only. */
    canTick: boolean;
    busy: boolean;
    onTick: (stepId: string) => void;
}

const tickedOn = (at: string): string => {
    const when = new Date(at);
    return Number.isNaN(when.getTime()) ? '' : when.toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
};

export const TaskChecklist = ({ task, canTick, busy, onTick }: TaskChecklistProps) => {
    const steps = readChecklist(task);
    const ticks = new Map(readChecklistTicks(task).map((tick) => [tick.step, tick.at]));
    const done = steps.filter((step) => ticks.has(step.id)).length;

    if (steps.length === 0) return null;

    return (
        <div data-testid="task-checklist">
            <div className="ak-section-head">
                <h4 className="ak-card__title">Checklist</h4>
                <span className="ak-section-head__count ml-auto">{done} of {steps.length} done</span>
            </div>
            <div
                className="ak-progress"
                role="progressbar"
                aria-label="Checklist progress"
                aria-valuemin={0}
                aria-valuemax={steps.length}
                aria-valuenow={done}
            >
                <span className="ak-progress__fill" style={{ '--ak-progress-value': `${Math.round((done / steps.length) * 100)}%` } as CSSProperties} />
            </div>
            {canTick && <p className="ak-field-help">Check off each item as you complete it.</p>}
            <ul className="m-0 list-none p-0">
                {steps.map((step) => {
                    const at = ticks.get(step.id);
                    const help = step.timing || at ? (
                        <>
                            {step.timing}
                            {step.timing && at && <> &middot; </>}
                            {at && <>ticked {tickedOn(at)}</>}
                        </>
                    ) : undefined;
                    return (
                        <li key={step.id} className="ak-row">
                            <CheckboxControl
                                label={step.instruction}
                                help={help}
                                checked={at !== undefined}
                                // A tick is never taken back, so a ticked step stays ticked and still.
                                disabled={!canTick || busy || at !== undefined}
                                onChange={(checked) => { if (checked) onTick(step.id); }}
                            />
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default TaskChecklist;