import { Offcanvas, Switch, Input } from "../offcanvas";
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import Widget from "../widgets/Widget";
import apiFetch from '@wordpress/api-fetch';
import { toast } from 'react-toastify';

export default function QuickCheckout({ video, id, docs }) {
    const [enable, setEnable] = useState(false)
    const [settings, setSettings] = useState(storebuild.settings._storebuild_quick_checkout_settings);
    const [modules, setModules] = useState(storebuild.pro_modules);

    const saveSettings = () => {
        apiFetch({
            path: '/wp/v2/settings',
            method: 'POST',
            data: {
                _storebuild_quick_checkout_settings: settings,
            },
        }).then(() => {
            toast.success(__('Settings saved.', 'shopbuild'));
        }).catch(() => {
            toast.error(__('Failed to save settings.', 'shopbuild'));
        });
    };

    return (
        <>
            <Widget
                title='Quick Checkout'
                description='Enable quickcheck for your customers. Checkout will be faster from your shop page and product page.'
                toggle={false}
                settings={true}
                onChange={() => setEnable(enable => !enable)}
                isPro={true}
                active={modules?.storebuild_quickcheckout || false}
            />
            <Offcanvas
                open={enable}
                onClose={() => setEnable(enable => !enable)}
                heading='Quick Checkout Settings'
                subtitle='Speed up the buying process with a streamlined one-step checkout from the shop or product page.'
                onSave={saveSettings}
                video={video}
                id={id}
                docs={docs}
            >
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_quickcheckout_module'
                        title='Enable / Disable'
                        text='Activate/Deactivate Quick Checkout System.'
                        defaultValue={settings?.enable}
                        onChange={() => setSettings(prev => ({ ...prev, enable: !settings?.enable }))}
                    />
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Show In', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_quickcheckcout_in_shop'
                        title='Show in shop?'
                        text=''
                        defaultValue={settings?.show_in_archive}
                        onChange={() => setSettings(prev => ({ ...prev, show_in_archive: !settings?.show_in_archive }))}
                    />
                    <Switch
                        id='storebuild_enable_quickcheckcout_in_single'
                        title='Show in Product Single?'
                        text=''
                        defaultValue={settings?.show_in_single}
                        onChange={() => setSettings(prev => ({ ...prev, show_in_single: !settings?.show_in_single }))}
                    />
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Button\'s Settings', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Input
                        id='storebuild_quickcheckout_button_text'
                        title='Button Text'
                        text='Change the text of the Buy Now button.'
                        defaultValue={settings?.button_text}
                        type='text'
                        onChange={(e) => setSettings(prev => ({ ...prev, button_text: e.target.value }))}
                    />
                </div>
            </Offcanvas>
        </>
    )
}