import React, {FC} from "react";
import {__} from "../globals";
import {EmulatedButton} from "./EmulatedButton";
import {CurrentDashboardSectionIdAtom, PopupWindowsState, PopupWindowStateContext, TreeContextData} from "./atoms";
import {TestablesSaver} from "./TestablesSaver";
import {Button} from "./cards/Button";
import {TreeDashboardSection} from "./TreeDashboardSections";
import {useOpenTestablesPopupWindow} from "./useOpenTestablesPopupWindow";
import {useAtom} from "jotai/index";
import {useOpenPopupsCount} from "./hooks";
import {getPopupStackDimensionCalculators} from "./ulitilies";

export type NewTreeActionsProps = {
    onClose?: PopupWindowsState['onClose']
    onselectelegible?: () => void,
    onTemplateActionSelected?: () => void,
}

export const NewTreeActions: FC<NewTreeActionsProps> = ({onClose, onselectelegible, onTemplateActionSelected}) => {
    const openTestablePopupWindow = useOpenTestablesPopupWindow();
    const [currentSectionId, setCurrentSectionId] = useAtom(CurrentDashboardSectionIdAtom)
    const popupsCount = useOpenPopupsCount()
    const stackDimensions = getPopupStackDimensionCalculators( popupsCount)

    return <div className="flex flex-col gap-2">
        <div className="space-y-1 flex flex-col items-center">
            <span className="text-base text-gray-500">{__('Select target products' /*'Select eligible cart items'*/)}</span>
            <EmulatedButton
                className="px-8 py-2 text-3x font-medium rounded-full ---rounded-2 bg-purple-tint-90 text-blue-10 hover:cursor-pointer relative z-[10] hover:scale-[1.03] active:scale-100 transition-all"
                onClick={() => {
                    // @ts-ignore
                    const context = {
                        id: 'welcome',
                        scope: 'tree-node',
                        data: {
                            componentType: 'filter',
                            targetType: 'root', // root | testableComposite
                            targetId: null, // string id if testableComposite, index if root (eg: 0 for the first root, 1 for the second root, etc)
                            suggestedScopeExperienceSelector: true, // this one for showing the promo selector for the testables
                            onClose: (data) => {
                                // this is new because we changed the popups arch.
                                // basically we now want to only close it on success. there mya be zombie comments that may suggest otherwise but this is the newest comment i promise
                                if (data.status === 'success') {
                                    onClose?.(data);
                                }
                            },
                            showTabs: false,
                            ...getPopupStackDimensionCalculators(popupsCount)
                        }
                    } as PopupWindowStateContext<TreeContextData>

                    openTestablePopupWindow<{suggestedScope: string | undefined}>({
                        // @ts-ignore
                        context,
                        onClose: (data) => {
                            if (data.status !== 'success' || !data.components) {
                                return
                            }

                            // @ts-ignore
                            const saver = new TestablesSaver(context)
                            // @ts-ignore
                            saver.add(data.components, data.extraData)
                        }
                    })
                }}>{__('Select Products')}</EmulatedButton>
        </div>
        <div className={'flex flex-col items-center gap-1   '}>
            <p className="text-smaller-1 text-gray-500">{__('Or')}</p>
            <Button preset={'gray-darker'} size={'medium'} onClick={() => {
                setCurrentSectionId(TreeDashboardSection.Presets)
                // close it, again as commented we now have to close the new tree popup manually
                onClose?.({})
            }}>
                <div className="flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-4 min-h-4 max-w-4 max-h-4">
                        <path d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z" />
                    </svg>
                    {__('Start from a template')}
                </div>
            </Button>
        </div>
    </div>
}