import React, {FC, useLayoutEffect} from "react";
import {CurrentDashboardSectionIdAtom} from "./tree/atoms";
import {TreeDashboardSection} from "./tree/TreeDashboardSections";
import {useAtomValue} from "jotai";
import {useViewPortDimensionsStyle} from "./tree/hooks";
import {DefaultWelcomeOptions} from "./tree/sections/DefaultWelcomeOptions";
import {Welcometop} from "./tree/welcometop";
import {WelcomeBottom} from "./tree/WelcomeBottom";

export type WelcomeNodeProps = {}
//onBFCacheRestore();
export const Welcome: FC<WelcomeNodeProps> = ({}) => {
    const {width, height, top} = useViewPortDimensionsStyle()
    const [dimensions, setDimensions] = React.useState({width: 0, height: 0});
    const currentSectionId = useAtomValue(CurrentDashboardSectionIdAtom)

    useLayoutEffect(() => {
        const containerDimensions = document.querySelector('.react-flow__container')?.getBoundingClientRect();

        if (containerDimensions) {
            setDimensions(containerDimensions);
        }
    }, [])

    if (currentSectionId !== TreeDashboardSection.Offers) {
        return null
    }

    return <div className="absolute left-0 z-[10000000000]" style={{
        width, height
    }}>
        <div className="relative space-y-6 flex flex-col items-center justify-between py-20 w-full h-full"
             style={{
                 //background: 'radial-gradient(circle, rgb(219 219 203 / 90%) 20%, rgb(148 187 233 / 12%) 110%)',
                 //background: 'radial-gradient(circle, rgb(219 219 203 / 90%) 20%, rgb(148 187 233 / 12%) 110%)',
                 background: 'radial-gradient(circle, rgb(173 177 241 / 49%) 2%, rgb(255 255 255) 78%)',
                 backdropFilter: 'blur(14px)',
             }}
        >
            <div className="absolute top-7 --left-16">
                <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="min-w-9 min-h-9 max-w-9 max-h-9 opacity-60">
                    <rect width="46" height="46" rx="16" fill="url(#paint0_linear_420_2)"/>
                    <rect width="46" height="46" rx="16" fill="#515A63"/>
                    <path opacity="0.8" d="M31.7701 36.5404L38.0762 21.8428L38.0671 21.829L25.702 21.8093L24.2742 25.1448L31.7701 36.5404Z" fill="white" fill-opacity="0.82"/>
                    <path opacity="0.8" d="M30.5665 10.4264L14.5778 10.4042L22.0737 21.7997L25.7019 21.8094L30.5802 10.4472L30.5665 10.4264Z" fill="white" fill-opacity="0.82"/>
                    <path opacity="0.8" d="M14.5648 37.0497L30.5579 37.0791L23.062 25.6835L19.4268 25.6784L14.5556 37.0359L14.5648 37.0497Z" fill="white" fill-opacity="0.82"/>
                    <path opacity="0.8" d="M13.3657 10.9427L7.05986 25.6403L7.069 25.6542L19.427 25.6784L20.8618 22.3384L13.3657 10.9427Z" fill="white" fill-opacity="0.82"/>
                    <path opacity="0.8" d="M38.067 21.8289L30.5802 10.4472L25.7019 21.8093L38.067 21.8289Z" fill="white"/>
                    <path opacity="0.8" d="M7.06872 25.6542L14.5555 37.036L19.427 25.6783L7.06872 25.6542Z" fill="white"/>
                    <defs>
                        <linearGradient id="paint0_linear_420_2" x1="23" y1="0" x2="23" y2="46" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#545454"/>
                            <stop offset="1" stop-color="#2A2A2A"/>
                        </linearGradient>
                    </defs>
                </svg>
            </div>
            <Welcometop/>
            <DefaultWelcomeOptions/>
            <WelcomeBottom/>
        </div>
    </div>;
}