import React from "react";
// @ts-ignore
import findkey from "lodash.findkey";
import { ViewerControls, ViewerWrapper } from "./Viewer.styled";
import { DialogClose } from "@radix-ui/react-dialog";
import { Mirador } from "./Mirador";
import { getMiradorConfig } from "hooks/viewer/getMiradorConfig";
import { uuid } from "services/uuid";
import { Note } from "./Note";
import { getStepData } from "hooks/getStepData";
export const Viewer = ({ manifestId, sequence, type, }) => {
    /*
     * todo: allow presentation to send multiple windows
     */
    const defaultKey = parseInt(findkey(sequence, { id: manifestId }));
    const [key, setKey] = React.useState(defaultKey);
    const data = getStepData(sequence[key]);
    const doStep = (step) => {
        setKey(step);
    };
    const prefix = `mirador-${uuid()}`;
    const config = getMiradorConfig(type);
    return (React.createElement(ViewerWrapper, { "data-screen": type },
        React.createElement(ViewerControls, null,
            React.createElement(DialogClose, null, "Close Viewer"),
            React.createElement(ViewerNavigation, { label: "Previous", stepKey: key, sequence: sequence, doStep: doStep }),
            React.createElement(ViewerNavigation, { label: "Next", stepKey: key, sequence: sequence, doStep: doStep })),
        type === "projection" && React.createElement(Note, { data: data.note }),
        React.createElement(Mirador, { config: Object.assign({ id: prefix, createGenerateClassNameOptions: {
                    productionPrefix: prefix,
                }, windows: data.currentWindows }, config), plugins: [], step: sequence[key], region: data.region })));
};
const ViewerNavigation = ({ label, stepKey, sequence, doStep, }) => {
    let disabled = false;
    let step = undefined;
    switch (label) {
        case "Previous":
            if (stepKey === 0)
                disabled = true;
            else
                step = stepKey + -1;
            break;
        case "Next":
            if (stepKey === sequence.length - 1)
                disabled = true;
            else
                step = stepKey + 1;
            break;
        default:
            console.error(`Label "${label}" is unknown.`);
    }
    return (React.createElement("button", { "data-step": step, disabled: disabled, onClick: () => doStep(step) }, label));
};
//# sourceMappingURL=Viewer.js.map