import './App.css'
import {useAvailableDimensions} from './lib/useAvailableDimensions'
import {__} from "@/Ulititlies.ts";
import {DottedGlowBackground} from "@/components/ui/dotted-glow-background.tsx";
import classNames from "classnames";
import {useState} from "react";
import {WelcomeHome} from "@/WelcomeHome.tsx";
import {LogoDark} from "@/LogoDark.tsx";
import {License} from "@/License.tsx";

const menus = [
    {id: 'welcome', name: __('Welcome'), component: WelcomeHome},
    CouponsPlusWelcome.hasCouponsPlusPro && {id: 'license', name: __('License'), component: License}, //server licensing currently not implemented (server-side).
].filter(Boolean);

function App() {
    const { width, height, leftOffset, topOffset } = useAvailableDimensions();
    const [selectedMenu, setSelectedMenu] = useState(menus[0].id);
    const Content = menus.find(menu => menu.id === selectedMenu)?.component || (() => <div className="text-gray-600">...</div>);
    return (
        <div id="coupons-plus-welcome" className="fixed z-10 w-full h-full bg-gray-100 py-4 px-16 overflow-auto"
             style={{width: `${width}px`, height: `${height}px`, left: `${leftOffset}px`, top: `${topOffset}px`}}>
            <div className="absolute top-0 left-0 w-full h-full">
                <DottedGlowBackground
                    className="pointer-events-none mask-radial-to-70% mask-radial-at-center opacity-60 "
                    opacity={0.2}
                    gap={19}
                    radius={8}
                    colorLightVar="--color-blue-normal"
                    glowColorLightVar="--color-blue-10"
                    colorDarkVar="--color-blue-normal"
                    glowColorDarkVar="--color-blue-shade-500"
                    backgroundOpacity={0.3}
                    speedMin={0.1}
                    speedMax={0}
                    speedScale={0.5} color={'red'}
                />
            </div>
            <div className="space-y-12 relative z-10 flex flex-col items-center">
                <div className="relative flex justify-start w-full">
                    <LogoDark />
                    <div className="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] border-[1px] border-gray-150 rounded-full h-9 px-1 flex items-center gap-3 bg-gray-750/5 backdrop-blur-[20px]">
                        {menus.map(({name, id}) => <button className={classNames("px-3 h-7 rounded-full text-base", {
                            'bg-transparent text-gray-600': selectedMenu !== id,
                            'bg-gray-800 text-gray-100 font-medium': selectedMenu === id,
                        })} onClick={() => setSelectedMenu(id)}>
                            {name}
                        </button>)}
                    </div>
                </div>
                {<Content /> }
            </div>
        </div>
    );
}

export default App