import React, {FC} from "react";
import {PresetDecoration} from "./PresetDecoration";
import {__} from "../../globals";
import {Button} from "../cards/Button";
import {updatePreference} from "./preferences/preferences";
import {Helix, Quantum, Ring2, Superballs} from 'ldrs/react'
//import 'ldrs/react/Quantum.css'
//import 'ldrs/react/Helix.css'
//import 'ldrs/react/Ring2.css'

import 'ldrs/react/Superballs.css'
import classNames from "classnames";
export type PresetsHaveNoPermissionToLoadProps = {
}

export const PresetsHaveNoPermissionToLoad: FC<PresetsHaveNoPermissionToLoadProps> = ({}) => {
    const [isSaving, setIsSaving] = React.useState(false);
    const grantPermissionAndLoadPresets = async () => {
        try {
            setIsSaving(true);
            await updatePreference('permissions.connect', true);
            // React will re-render the Presets component after the atom is updated
        } catch (error) {
           setIsSaving(false);
            console.error('Failed to grant permission:', error);
        } finally {
            setIsSaving(false);
        }
    }

    return <div className="space-y-4 text-center flex flex-col items-center h-full justify-center">
        <PresetDecoration/>
        <div className="max-w-120 space-y-1 flex flex-col items-center">
            <h1 className="text-6x text-gray-750 font-medium">{__('Import ready-to-use presets')}</h1>
            <p className="text-base leading-4 text-gray-450 text-center">{__('To load presets, we need your permission to connect to our secure API.')}</p>
            <p className="text-base leading-4 text-gray-450 text-center">
                <span>{__('This is a free service and it\'s completely optional. Connecting to our APIs does not send any personal user data to us. You can change this at any time.')} </span>
                <a href="https://couponspluspro.com/plugin-services-privacy-policy/" target={'_blank'} rel={
                    /**
                     * No referer here for privacy reasons, because the user hasn't granted permission yet and wants to read the privacy
                     * policy first.
                     */
                    'noreferrer noopener'
                } className="text-gray-650 font-medium">{__('Privacy Policy')}</a>
            </p>
        </div>
        <Button preset="blue" width={'wrap'}  onClick={grantPermissionAndLoadPresets}>
            <div className={'flex items-center gap-2'}>
                <div className={classNames('absolute left-1/2 top-1/2 translate-y-[-50%] translate-x-[-50%] flex transition-all duration-300 ease', {
                    'scale-[2] opacity-0': !isSaving,
                    'opacity-100 scale-100': isSaving,
                })}>
                    <Superballs
                        size="22"
                        speed="1.20"
                        color="white"
                    />
                </div>
                <div className={classNames('relative  transition-all duration-200 flex items-center gap-2', {
                    'opacity-0 scale-95': isSaving,
                    'opacity-100 scale-100': !isSaving,
                })}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                        <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clipRule="evenodd" />
                    </svg>
                    <span>{__('I understand, connect to api.couponspluspro.com')}</span>
                </div>
            </div>
        </Button>
    </div>
}