import React from 'react' import { getStrings } from '../Helpers'; const MagicWizard = ({ isAIConfigured, tableSettings, setTableSettings }) => { const handleToggleWithAnimation = (toggleType: string, value: boolean) => { if (!isAIConfigured) { const wizardSection = document.querySelector('.wizard-setup-content'); if (wizardSection) { const scrollableParent = wizardSection.closest('[style*="overflow"]') || window; const isWindow = scrollableParent === window; // Calculate scroll position const currentScroll = isWindow ? window.scrollY : (scrollableParent as Element).scrollTop; const maxScroll = isWindow ? document.documentElement.scrollHeight - window.innerHeight : (scrollableParent as Element).scrollHeight - (scrollableParent as Element).clientHeight; // Calculate current scroll percentage const scrollPercentage = maxScroll > 0 ? (currentScroll / maxScroll) * 100 : 100; // If less than 20%, scroll first then shake if (scrollPercentage < 20) { const targetScroll = Math.min(currentScroll + (maxScroll * 0.4), maxScroll); scrollableParent.scrollTo({ top: targetScroll, behavior: 'smooth' }); // Shake after scroll completes setTimeout(() => { wizardSection.classList.add('shake-animation'); setTimeout(() => { wizardSection.classList.remove('shake-animation'); }, 600); }, 350); } else { // If 40% or more, just shake immediately wizardSection.classList.add('shake-animation'); setTimeout(() => { wizardSection.classList.remove('shake-animation'); }, 600); } } return; } // Update the setting setTableSettings({ ...tableSettings, table_settings: { ...tableSettings.table_settings, [toggleType]: value, }, }); }; return (

{getStrings('ai-table-summary')}

{getStrings('ai-table-summary-description')}

{getStrings('ai-ask-ai')}

{getStrings('ai-ask-ai-description')}

{/*
🧙‍♂️
*/}

{getStrings('ai-connect-to-unlock-features')}

{getStrings('ai-connect-to-unlock-features-description')}

{` `}{getStrings('ai-setup-provider')} {` `}{getStrings('ai-help')}
{getStrings('ai-not-ready')}
) } export default MagicWizard