import React, {FC, useEffect, useMemo, useState} from "react";
import {PopupWindow} from "../PopupWindow";
import {useAtom} from "jotai/index";
import {AddNewTreePopupWindowIsOpen, CurrentDashboardSectionIdAtom} from "./atoms";
import {__} from "../globals";
import {NewTreeActions} from "./NewTreeActions";
import {useAtomValue} from "jotai";
import {TreeDashboardSection} from "./TreeDashboardSections";

export type AddNewTreePopupWindowProps = {
}

export const AddNewTreePopupWindow: FC<AddNewTreePopupWindowProps> = ({}) => {
    const [isOpen, setIsOpen] = useAtom(AddNewTreePopupWindowIsOpen)
    const [selectingProducts, setSelectingProducts] = useState(false)
    const currentDashboardSection = useAtomValue(CurrentDashboardSectionIdAtom)

    useEffect(() => {
        if (isOpen && currentDashboardSection === TreeDashboardSection.Presets) {
            // let's close it, the user has decided to select a preset, so let's close this popup
            //setIsOpen(false)
        }

    }, [isOpen, currentDashboardSection])

    return <PopupWindow id="add-new-tree"
                        isOpen={!selectingProducts && isOpen}
                        screens={useMemo(() => [
                            {
                                id: 1,
                                title: __('Add a new offer (tree)'),
                                description: () =>  [
                                    __('Add a new tree for this coupon. This is useful when you want to have multiple offers per coupon.'),
                                    __('Example: Category A -> 10% OFF, Category B -> 20% OFF, etc.')
                                ].map(t => <p className="text-base">{t}</p>),
                                content: () => <NewTreeActions onselectelegible={() => {
                                    setTimeout(() => {
                                        setSelectingProducts(true)
                                    }, 200)
                                }} onClose={({status}) => {
                                    setSelectingProducts(false)
                                    setIsOpen(false)
                                    /**
                                     * Only close it if the user added testables,
                                     * if they close the testables panel but didnt add anything, that means they want to "go back"
                                     * to maybe add a preset instead of manually selecting the products
                                     * so let's keep this popup open unless they've added testables
                                     */
                                    /*if (status === 'success') {
                                        setIsOpen(false);
                                    }*/
                                }} />,
                                showBottomNavigation: false
                            }
                        ], [setIsOpen])}
                        screenId={1}
                        defaultScreenId={1}
                        setCurrentScreenId={() => {}}
                        onClose={() => setIsOpen(false)}
    />
}