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 PreOrder({ video, id, docs }) {
    const [enable, setEnable] = useState(false)
    const [settings, setSettings] = useState(storebuild.settings._storebuild_preorder_settings);
    const [modules, setModules] = useState(storebuild.pro_modules);

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

    return (
        <>
            <Widget
                title='PreOrder'
                description='Enable/Disable Pre-Order System From Here. This will allow you to manage the Pre-Order System. This will appear under inventory manage tab.'
                toggle={false}
                settings={true}
                onChange={() => setEnable(enable => !enable)}
                isPro={true}
                active={modules?.storebuild_preorder || false}
            />
            <Offcanvas
                open={enable}
                onClose={() => setEnable(enable => !enable)}
                heading='PreOrder Settings'
                subtitle='Let customers reserve upcoming products before they are in stock and capture sales early.'
                onSave={saveSettings}
                video={video}
                id={id}
                docs={docs}
            >
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_preorder_module'
                        title='Enable / Disable'
                        text='Deactivate/Activate Pre-Order System.'
                        defaultValue={settings?.enable}
                        onChange={() => setSettings(prev => ({ ...prev, enable: !settings?.enable }))}
                    />
                </div>
                <div className="strb-canvas-option strb-big-input">
                    <Input
                        id='storebuild_preorder_price_label'
                        title='Manage Price Label'
                        text='Manage how you want the "Price Label" to appear. Use this {price} placeholder to display the price.'
                        defaultValue={settings?.manage_price_label}
                        type='textarea'
                        onChange={(e) => setSettings(prev => ({ ...prev, manage_price_label: e.target.value }))}
                    />
                    {/* <DateTimePicker
                    currentDate={ date }
                    onChange={ ( newDate ) => setDate( newDate ) }
                    is12Hour={ true }
                /> */}

                    <Input
                        id='storebuild_preorder_date_label'
                        title='Availability Date Label'
                        text='Manage how you want the "Message" to appear. Use this {availability_date_label} placeholder to display the date you set.'
                        defaultValue={settings?.availability_date_label}
                        type='textarea'
                        onChange={(e) => setSettings(prev => ({ ...prev, availability_date_label: e.target.value }))}
                    />
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>Show Countdown Timer</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_preorder_countdown'
                        title='Enable / Disable'
                        text='Deactivate/Activate Countdown Timer.'
                        defaultValue={settings?.enable_countdown}
                        onChange={() => setSettings(prev => ({ ...prev, enable_countdown: !settings?.enable_countdown }))}
                    />
                </div>
            </Offcanvas>
        </>
    )
}