import React, {FC, useEffect, useMemo, useRef, useState} from "react";
import {PopupWindow} from "../PopupWindow";
import {useAtom} from "jotai/index";
import {BuyXGetYSpecificProductWindowStateAtom, CurrentDashboardSectionIdAtom} from "./atoms";
import {__} from "../globals";
import {NewTreeActions} from "./NewTreeActions";
import {useAtomValue} from "jotai";
import {TreeDashboardSection} from "./TreeDashboardSections";
import {MultiSelect} from "./fields/MultiSelect";
import {BuyXGetYSpecificProductConfigFields} from "./BuyXGetYSpecificProductConfigFields";
import {data} from "autoprefixer";
import {useOpenPopupsCount} from "./hooks";
import {getPopupStackDimensionCalculators} from "./ulitilies";

export type BuyXGetYSpecificProductWindowProps = {
}

export const BuyXGetYSpecificProductWindow: FC<BuyXGetYSpecificProductWindowProps> = ({}) => {
    const [windowContext, setWindowContext] = useAtom(BuyXGetYSpecificProductWindowStateAtom)
    const dataRef = useRef<object>(windowContext?.data || {});
    const [canSave, setCanSave] = useState(false);
    const popupsCount = useOpenPopupsCount()
    const stackDimensions = getPopupStackDimensionCalculators( popupsCount)
    let isOpen = !!windowContext;

    let mode: 'new' | 'edit' = 'new'

    if (isOpen && typeof windowContext?.index !== 'undefined' && typeof windowContext?.data !== 'undefined') {
        mode = 'edit'
    }
    useEffect(() => {
        dataRef.current = windowContext?.data || {}
    }, [windowContext])

    {
        return <PopupWindow id="buy-x-get-y-specific-product"
                                    isOpen={isOpen}
                                    zIndex={1000000 + 10}
                                    screens={useMemo(() => [
                                    {
                                        id: 1,
                                        title: () => __('Select the Product to Discount'),
                                        description: () =>  [
                                            __('This is the product that will get discounted. The discount will apply to additional items, separate from the filtered items.'),
                                        ].map(t => <p className="text-base">{t}</p>),
                                        content: () => <BuyXGetYSpecificProductConfigFields context={windowContext} onDataModified={data => {
                                            dataRef.current = data
                                            !canSave && setCanSave(true)
                                        }} /> ,
                                        primaryBottom: () => ({
                                            label: mode === 'new'? __('Add this product') : __('Save Product'),
                                            onClick: () => {
                                                // @ts-ignore
                                                if (!dataRef?.current?.id) {
                                                    return
                                                }
                                                const payload = {
                                                    ...(windowContext || {}),
                                                    data: dataRef.current
                                                }
                                                // set the data to the get y
                                                windowContext?.onClose?.('success', payload)
                                                // so here we'll close the popup
                                                setWindowContext(null)
                                                // reset the ref
                                                dataRef.current = {}
                                            },
                                        })
                                    }
                                ], [windowContext])}
                                    screenId={1}
                                    defaultScreenId={1}
                                    setCurrentScreenId={() => {}}
                                    onClose={() => setWindowContext(null)}
                                    customTop={stackDimensions.top}
                                    customWidth={stackDimensions.width}
            />
    }
}