import Page, {PageFlexRow} from "../primitives/page/Page";
import {useCallback, useContext, useEffect, useMemo, useState} from "react";
import RuntimeContext from "../contexts/RuntimeContext";
import {useNavigate} from "react-router";
import LoadingPage from "./LoadingPage";
import DeviceContext from "../contexts/DeviceContext";
import ProgramContext from "../contexts/ProgramContext";
import {Device} from "../models/Devices";
import {Program, subTitleOfProgram} from "../models/Programs";
import {useKey, usePlusMinus} from "../hooks/keyboard";
import {FluffyValue, TitleLine, Value} from "../primitives/misc/Misc";
import Blob, {BlobText, BlobTextLine} from "../primitives/blob/Blob";
import {Icon} from "../primitives/Shared";
import {faClose, faPlay} from "@fortawesome/free-solid-svg-icons";
import {stateString, WorkoutStatus} from "../models/Workouts";
import {Boi} from "../primitives/boi/Boi";
import {useLastState} from "./runtime/hooks";
import {ControlsBoi} from "./runtime/ControlsBoi";
import MessageBoi from "./runtime/MessageBoi";
import ProgramBoi from "./runtime/ProgramBoi";
import MilestoneBoi from "./runtime/MilestoneBoi";
import {useKpm} from "../hooks/kpm";
function PlayPage(): JSX.Element {
const {active, ready, ended, workout, reset, resume} = useContext(RuntimeContext);
const navigate = useNavigate();
useEffect(() => {
if (!active) {
resume();
}
}, [active, resume]);
useEffect(() => {
if (active && ended && workout) {
navigate(`/workouts/${workout.id}`, {replace: true});
reset();
}
}, [active, ready, ended, workout]);
if (active && ready && workout === null) {
return ;
}
if (active && workout !== null) {
return ;
}
return ;
}
const noProgram: Program = {
id: "",
name: "Uten program",
steps: [{index: 0, values: {}, duration: undefined}],
}
function CreatePlayPage(): JSX.Element {
const {devices} = useContext(DeviceContext);
const {programs} = useContext(ProgramContext);
const {create} = useContext(RuntimeContext);
const programWithFake = useMemo(() => programs ? [noProgram, ...programs] : null, [programs]);
const navigate = useNavigate();
const [device, setDevice] = useState(null);
const [program, setProgram] = useState(null);
const [sel, setSel] = usePlusMinus((device ? (program ? 2 : programWithFake?.length) : devices?.length) || 1);
const confirmSelection = useCallback((idx: number) => {
if (program && device) {
if (idx === 0) {
create({deviceId: device.id, programId: program.id || undefined, test: false})
} else {
navigate("/");
}
} else if (device && programWithFake) {
setProgram(programWithFake[idx] || null);
setSel(0);
} else if (devices !== null) {
setDevice(devices[idx] || null);
setSel(0);
}
}, [create, device, program, devices, programWithFake]);
useKey("Enter", () => {
confirmSelection(sel);
}, [confirmSelection, sel]);
useKey("Escape", () => {
navigate("/");
}, []);
useEffect(() => {
if (devices && devices.length === 0) {
navigate("/");
}
}, [devices]);
if (devices === null) {
return
} else if (programWithFake === null) {
return
}
return (
{device === null && (
Velg enhet
{devices.map((d, i) => (
confirmSelection(i)} color={sel === i ? "indigo" : "gray"}>
{d.name}
{d.connectionString}
))}
)}
{device !== null && program === null && (
Velg program
{programWithFake.map((p, i) => (
confirmSelection(i)} color={sel === i ? "indigo" : "gray"}>
{p.name}
{subTitleOfProgram(p)}
))}
)}
{device && program && (
Oppsumering
{device && (
{device.name}
{device.connectionString}
)}
{program && (
{program.name}
{subTitleOfProgram(program)}
)}
{device && program && (
<>
confirmSelection(0)} color={sel === 0 ? "indigo" : "gray"}>
Start
confirmSelection(1)} color={sel === 1 ? "indigo" : "gray"}>
Avbryt
>
)}
)}
);
}
function RunPlayPage(): JSX.Element {
const {workout} = useContext(RuntimeContext);
const lastState = useLastState();
const kpm = useKpm();
if (!workout || workout.status === WorkoutStatus.Created) {
return ;
}
return (
{lastState && (
{kpm > 0 && }
)}
{workout?.status === WorkoutStatus.Connected && }
{workout?.status === WorkoutStatus.Stopped && }
{workout.program && workout.program.steps.length > 0 && }
);
}
export default PlayPage;