import React, {FC} from "react";
import {PopupWindow} from "../PopupWindow";
import {ExamplesPopupWindowStateAtom, getDefaultClosedExamplesPopupWindowState} from "./atoms";
import {useAtom} from "jotai";
import {useScreenNavigation} from "./hooks";
import {__} from "../globals";

export type ExamplesPopupWindowProps = {}

/**
 * Do ont put this in the same file as the Testable popup window because on update this will update too causing nasty bugs
 */
export const ExamplesPopupWindow: FC<ExamplesPopupWindowProps> = ({}) => {
    const [{isOpen, context}, setExamplesPopupState] =  useAtom(ExamplesPopupWindowStateAtom)
    const [currentScreenId, setCurrentScreenId] = useScreenNavigation()
    const closePopup = () => setExamplesPopupState(getDefaultClosedExamplesPopupWindowState())

    return <PopupWindow
        id={'examples-popup'}
        screenId={1}
        setCurrentScreenId={setCurrentScreenId as any /*shut up basically*/}
        defaultScreenId={1}
        screens={[
            {
                id: 1,
                title: () => null,
                description: undefined,
                content: () => {
                    return `this are the examples for the id: ${context.id}`
                },
                showBottomNavigation: true,
                primaryBottom: () => ({
                    label: __('OK'),
                    onClick: closePopup,
                })
            },
        ]}
        isOpen={isOpen}
        onClose={closePopup}
    />
}