import React, {FC, useMemo, useRef, useState} from "react";
import {PopupWindow} from "../PopupWindow";
import {useAtom} from "jotai/index";
import {__} from "../globals";
import {NewTreeActions} from "./NewTreeActions";
import {MultiSelect} from "./fields/MultiSelect";
import {BuyXGetYSpecificProductConfigFields} from "./BuyXGetYSpecificProductConfigFields";
import {merge} from "lodash";
import {BuyXGetYNotInCartNotificationWindowStateAtom} from "./atoms";
import {BuyXGetYNotInCartNotificationConfigFields} from "./BuyXGetYNotInCartNotificationConfigFields";
import {NotInCartNotification} from "./cards/BuyXGetY";
import {getPopupStackDimensionCalculators} from "./ulitilies";
import {useOpenPopupsCount} from "./hooks";

export type BuyXGetYNotInCartNotificationPopupWindowProps = {
}

export const BuyXGetYNotInCartNotificationPopupWindow: FC<BuyXGetYNotInCartNotificationPopupWindowProps> = ({}) => {
    const [windowContext, setWindowContext] = useAtom(BuyXGetYNotInCartNotificationWindowStateAtom)
    const dataRef = useRef<NotInCartNotification | null>(windowContext?.data || null);
    const popupsCount = useOpenPopupsCount()
    const stackDimensions = getPopupStackDimensionCalculators( popupsCount)
    let isOpen = !!windowContext;

    return <PopupWindow id="buy-x-get-y-notification"
                        isOpen={isOpen}
                        zIndex={1000000 + 10}
                        screens={useMemo(() => [
                            {
                                id: 1,
                                title: () => __('Notification when item is not in cart'),
                                description: () =>  [
                                    __("This is the notifcation that is shown to the customer in the cart page when the elegible item for discount is not in the cart and wasn't added automatically."),
                                ].map(t => <p className="text-base">{t}</p>),
                                content: () => !!windowContext && <BuyXGetYNotInCartNotificationConfigFields notification={windowContext?.notification!} onDataModified={data => {
                                    dataRef.current = data
                                }} /> ,
                                primaryBottom: () => ({
                                    label: __('Save'),
                                    onClick: () => {
                                        // so here we'll close the popup
                                        setWindowContext(null)
                                        // set the data to the get y
                                        windowContext?.onClose?.('success', merge(dataRef.current))
                                        // reset the ref
                                        dataRef.current = null
                                    },
                                })
                            }
                        ], [windowContext])}
                        screenId={1}
                        defaultScreenId={1}
                        setCurrentScreenId={() => {}}
                        onClose={() => setWindowContext(null)}
                        customTop={stackDimensions.top}
                        customWidth={stackDimensions.width}
    />
}