import React, {useCallback, useContext, useEffect, useMemo} from "react";
import ProgramContext from "../contexts/ProgramContext";
import {useNavigate, useParams} from "react-router";
import LoadingPage from "./LoadingPage";
import Header, {HeaderButton, HeaderTitle} from "../primitives/header/Header";
import {Icon} from "../primitives/Shared";
import {
faArrowUpRightDots,
faCheck,
faChevronLeft,
faPencilAlt, faStopwatch,
faTag,
faTrashCan
} from "@fortawesome/free-solid-svg-icons";
import Page, {PageBody, PageFlexColumn, PageFlexRow} from "../primitives/page/Page";
import {Size, valuesToString} from "../models/Shared";
import {TitleLine} from "../primitives/misc/Misc";
import Blob, {BlobInput, BlobText} from "../primitives/blob/Blob";
import deviceRepo from "../actions/devices";
import programRepo from "../actions/programs";
export default function ProgramPage() {
const {programs, refreshPrograms} = useContext(ProgramContext);
const navigate = useNavigate();
const {id} = useParams();
const program = useMemo(() => programs?.find(p => p.id === id), [programs, id]);
useEffect(() => {
if (programs && !program) {
navigate("/");
}
}, [programs, program]);
const onDelete = useCallback(() => {
if (!program || !window.confirm("Vil du fjerne denne enheten?")) return;
programRepo().delete(program).then(() => {
refreshPrograms();
navigate("/");
})
}, [program, navigate, refreshPrograms]);
if (!program) {
return ;
}
return (
navigate("/")}>
{program.name}
Programm
{program.name}
navigate(`/programs/${program.id}/edit`)}>
Steg
{program.steps.map((s, i) => (
{s.values.level}
{valuesToString(s.duration || {}) || "Manuell"}
))}
);
}