import React, {FC} from "react";
import {useAtomValue} from "jotai";
import {PermissionToLoadPresetsAtom} from "../atoms";
import {__} from "../../globals";
import {updatePreference} from "./preferences/preferences";
import {useIsMobile, useTreeDashboardAvailableDimensions} from "../hooks";
import {Tabs} from "../fields/tabs";
import classNames from "classnames";
import {motion, AnimatePresence} from "framer-motion";
import {Superballs} from 'ldrs/react';
import 'ldrs/react/Superballs.css';
import {EmulatedCrossBackground, SolidOverlayGradient} from "./EmulatedBackground";

export type TreePreferencesProps = {
}

export const TreePreferences: FC<TreePreferencesProps> = ({}) => {
    const {leftOffset, rightOffset, edgeOffset} = useTreeDashboardAvailableDimensions()
    const isMobile = useIsMobile()
    const connectPermissionEnabled = useAtomValue(PermissionToLoadPresetsAtom)
    const [preferenceLoading, setPreferenceLoading] = React.useState<boolean>(false);

    // Mobile-friendly padding values
    const mobilePaddingLeft = 16
    const mobilePaddingRight = 16
    const mobilePaddingTop = edgeOffset + 80  // Account for mobile top bar

    return <div className={classNames('w-full h-full relative overflow-y-scroll flex flex-col items-center', {
        'bg-white': isMobile,
    })} style={{
        paddingLeft: isMobile ? mobilePaddingLeft : leftOffset,
        paddingRight: isMobile ? mobilePaddingRight : rightOffset,
        paddingTop: isMobile ? mobilePaddingTop : (edgeOffset + 120),
        paddingBottom: isMobile ? 100 : 0,  // Account for mobile bottom nav
    }}>
        {!isMobile && <EmulatedCrossBackground gap={25} size={8} opacity={0.6}/>}
        {!isMobile && <SolidOverlayGradient leftOffset={leftOffset} rightOffset={rightOffset} />}
        <div className={classNames("relative z-20 px-5 py-4 border-[2px] border-gray-150 rounded-1 w-full space-y-7", {
            'max-w-120': !isMobile,
        })}>
            <div className="space-y-3">
                <div className="flex items-center gap-3">
                    <div
                        className="flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded-[10px] bg-gray-500 text-gray-100">
                        <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="M15.75 8.25a.75.75 0 0 1 .75.75c0 1.12-.492 2.126-1.27 2.812a.75.75 0 1 1-.992-1.124A2.243 2.243 0 0 0 15 9a.75.75 0 0 1 .75-.75Z"/>
                            <path fillRule="evenodd"
                                  d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM4.575 15.6a8.25 8.25 0 0 0 9.348 4.425 1.966 1.966 0 0 0-1.84-1.275.983.983 0 0 1-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453 1.453 0 0 1 2.328-.377L16.5 15h.628a2.25 2.25 0 0 1 1.983 1.186 8.25 8.25 0 0 0-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.575 15.6Z"
                                  clipRule="evenodd"/>
                        </svg>
                    </div>
                    <h2 className="text-gray-750 text-3x font-medium">{__('Connection to Coupons+ services')}</h2>
                </div>
                <p className="text-base text-gray-500 leading-4">{__('Allow this site to connect to api.couponspluspro.com for use of Coupons+ services like loading and importing presets.')}</p>
            </div>
            {false && <button onClick={() => {
                updatePreference('permissions.connect', !connectPermissionEnabled)
            }}>
                {connectPermissionEnabled ? ('Permissions granted. click to ungrant') : ('Permissions not granted. click to grant')}
            </button>}
            <div className={classNames('relative', {
                'pointer-events-none': preferenceLoading,
            })}>
                <AnimatePresence>
                    {preferenceLoading && (
                        <motion.div
                            initial={{opacity: 0}}
                            animate={{opacity: 1}}
                            exit={{opacity: 0}}
                            className="absolute inset-0 bg-white/60 backdrop-blur-[1px] rounded-1 z-10 flex items-center justify-center"
                        >
                            <Superballs size={40} speed={1.4} color="#6b7280"/>
                        </motion.div>
                    )}
                </AnimatePresence>
                <Tabs tabs={[
                    {
                        id: 'permissions.connect',
                        label: __('Grant permission to connect to Coupons+ APIs'),
                        subLabel: __('Required for loading presets and other services'),
                    }
                ]} selectedTabId={connectPermissionEnabled ? 'permissions.connect' : ''} onTabSelect={async () => {
                    setPreferenceLoading(true);
                    await updatePreference('permissions.connect', !connectPermissionEnabled)
                    setPreferenceLoading(false);
                }}/>
            </div>
        </div>
    </div>;
};