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

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

    return (
        <>
            <Widget
                title='Backorder'
                description='Enable/Disable Backorder System From Here.'
                toggle={false}
                settings={true}
                onChange={() => setEnable(enable => !enable)}
                isPro={false}
                active={true}
            />
            <Offcanvas
                open={enable}
                onClose={() => setEnable(enable => !enable)}
                heading='Backorder Settings'
                subtitle='Allow customers to buy out-of-stock products and fulfill orders when new stock arrives.'
                onSave={saveSettings}
                video={video}
                id={id}
                docs={docs}
            >
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_backorder_module'
                        title='Enable / Disable'
                        text='Deactivate/Activate Backorder System.'
                        defaultValue={settings.enable}
                        onChange={() => setSettings(prev => ({ ...prev, enable: !settings.enable }))}
                    />
                </div>
                <div className="strb-canvas-option strb-big-input">
                    <Input
                        id='storebuild_backorder_limit'
                        title='Backorder Limit'
                        text='Set "Backorder Limit" on all "Backorder" products across the entire website. You can also set limits for each product individually from the "Inventory" tab.'
                        defaultValue={settings.limit}
                        type='number'
                        onChange={(e) => setSettings(prev => ({ ...prev, limit: e.target.value }))}
                    />
                    <Input
                        id='storebuild_backorder_date'
                        title='Availability Date'
                        text=''
                        defaultValue={settings.availability_date}
                        type='date'
                        onChange={(e) => setSettings(prev => ({ ...prev, availability_date: e.target.value }))}
                    />

                    <Input
                        id='storebuild_backorder_message'
                        title='Availability Message'
                        text='Manage how you want the "Message" to appear. Use this {availability_date} placeholder to display the date you set.'
                        defaultValue={settings.availability_message}
                        type='textarea'
                        onChange={(e) => setSettings(prev => ({ ...prev, availability_message: e.target.value }))}
                    />
                </div>
            </Offcanvas>
        </>
    )
}