import React, {FC} from "react";
import {Tree} from "./Tree";
import {atomsStore, CurrentDashboardSectionIdAtom, sidebarEdgeOffsetAtom, viewportDimensionsAtom} from "./tree/atoms";
import {Provider, useAtomValue, useSetAtom} from "jotai";
import {SelectActionPopupWindow} from "./tree/SelectActionPopupWindow";
import {SelectOptionRenderers} from "./tree/fields/SelectOptionRenderers";
import {PopupWindows} from "./tree/PopupWindows";
import {TreeSidebarLeft} from "./tree/TreeSidebarLeft";
import {TreeSidebarRight} from "./tree/TreeSidebarRight";
import {TreeDashboardSection} from "./tree/TreeDashboardSections";
import {TreePresets} from "./tree/sections/TreePresets";
import classNames from "classnames";
import {AddNewTreePopupWindow} from "./tree/AddNewTreePopupWindow";
import {Toaster} from "react-hot-toast";
import CouponURLsPanel from "./CouponURLsPanel";
import {TreeHeader} from "./tree/TreeHeader";
import {BuyXGetYSpecificProductWindow} from "./tree/BuyXGetYSpecificProductWindow";
import {BuyXGetYNotInCartNotificationPopupWindow} from "./tree/BuyXGetYNotInCartNotificationPopupWindow";
import {useViewPortDimensionsStyle} from "./tree/hooks";
import {TreePreferences} from "./tree/sections/TreePreferences";
import {MobileBetaBadge} from "./tree/MobileBetaBadge";
import {ExamplesPopupWindow} from "./tree/ExamplesPopupWindow";
import {SelectMenuPopupWindows} from "./tree/SelectMenuPopupWindows";
import {ProUpgradePopupWindow} from "./tree/ProUpgradePopupWindow";
import {TestableCompositeOverlay} from "./tree/TestableCompositeOverlay";
import {TestableGroupModePopupWindow} from "./tree/TestableGroupModePopupWindow";

export type TreeDashboardProps = {}

const OffersSection = {
    id: TreeDashboardSection.Offers,
    component: Tree
}

export const sections = [
    {
        id: TreeDashboardSection.Presets,
        component: TreePresets
    },
    {
        id: TreeDashboardSection.Url,
        component: CouponURLsPanel
    },
    {
        id: TreeDashboardSection.Advanced,
        component: TreePreferences
    }
]

// Inner component so that atom usage is inside Provider with atomsStore
const TreeDashboardContent: FC<{}> = () => {
    const {width, height, top, left} = useViewPortDimensionsStyle()
    const verticalOffset = useAtomValue(sidebarEdgeOffsetAtom)
    const currentSectionId = useAtomValue(CurrentDashboardSectionIdAtom)

    const setViewportDimensions = useSetAtom(viewportDimensionsAtom)

    //const [ref, {width, height}] = useMeasure<HTMLDivElement>()

    /*useEffect(() => {
        setViewportDimensions({width, height})
    }, [width, height]);*/

    const SelectedSectionComponent = sections.find(section => section.id !== OffersSection.id && section.id === currentSectionId)?.component

    return <SelectOptionRenderers>
        <div className="cp-dashboard fixed bg-white top-0 z-[1002] w-full"
             style={{
                 top,
                 left,
                 width,
                 height,
             }}
        >
            <TreeSidebarLeft/>
            <div className={classNames({
                'w-full h-full': true,
                'hidden': currentSectionId !== OffersSection.id
            })}>
                <OffersSection.component />
            </div>
            {SelectedSectionComponent && <SelectedSectionComponent/>}
            <TreeHeader />
            <TreeSidebarRight/>

            {/* --popups start--
                WE HAVE TO SEPARATE THE SELECT ACTION AND THE CARD POPUP WINDOWS BECAUSE THERE'S AN ISSUE
                WHEN OPENING A POPUP WHILE INSIDE A SELECT ACTION POPUP
            */}
            <SelectActionPopupWindow/>
            <AddNewTreePopupWindow />
            <ProUpgradePopupWindow />
            <TestableGroupModePopupWindow />
            <PopupWindows/>
            <BuyXGetYSpecificProductWindow />
            <BuyXGetYNotInCartNotificationPopupWindow />
            <ExamplesPopupWindow />
            <SelectMenuPopupWindows />
            <TestableCompositeOverlay />
            {/* --popups end--*/}

            <MobileBetaBadge />
            <div className="relative z-[1000000000]">
                <Toaster
                    toastOptions={{}}
                    containerClassName="cp-hot-toast-container"
                    containerStyle={{
                    top: top + verticalOffset
                }}/>
            </div>
        </div>
    </SelectOptionRenderers>
}

export const TreeDashboard: FC<TreeDashboardProps> = ({}) => {
    /**
     * The jotai atoms weren't updating properly so we'll use this wrapper
     */
    return <Provider store={atomsStore}>
        <TreeDashboardContent/>
    </Provider>
}