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

export default function Quickview({ video, id, docs }) {
    const [enable, setEnable] = useState(false)
    const [settings, setSettings] = useState(storebuild.settings._storebuild_quickview_settings);
    const templates = storebuild.quickview_templates;

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

    const hasPro = Boolean(storebuild?.is_pro_active);
    const proNotice = __('Use <a target="_blank" href="https://storebuild.shop/pricing/">StoreBuild Pro</a> To add custom elementor templates.', 'shopbuild');

    return (
        <>
            <Widget
                title='Quickview'
                description='User can switch currency for better selling experience.'
                toggle={false}
                settings={true}
                onChange={() => setEnable(enable => !enable)}
                isPro={false}
                active={true}
            />
            <Offcanvas
                open={enable}
                onClose={() => setEnable(enable => !enable)}
                heading='Quickview Settings'
                subtitle='Let shoppers preview product details in a popup without navigating away from the shop page.'
                onSave={saveSettings}
                video={video}
                id={id}
                docs={docs}
            >
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_quickview_module'
                        title='Enable / Disable'
                        text='Deactivate/Activate Quickview System.'
                        defaultValue={settings.enable}
                        onChange={() => setSettings(prev => ({ ...prev, enable: !settings.enable }))}
                    />
                    <Dropdown
                        id='storebuild_quickview_template_type'
                        title='Template type'
                        text='Select a type.'
                        data={[
                            { value: 'default', label: 'Default' },
                            { value: 'custom', label: 'Custom' }
                        ]}
                        selected={settings.template_type}
                        onChange={(e) => setSettings(prev => ({ ...prev, template_type: e.target.value }))}
                    />
                    {(settings.template_type === 'custom' && !hasPro) && (
                        <Notice status="warning" isDismissible={false}>
                            <RawHTML>{proNotice}</RawHTML>
                        </Notice>
                    )}
                    {(settings.template_type === 'custom' && hasPro) && (
                        <Dropdown
                            id='storebuild_quickview_template'
                            title='Templates'
                            text='Select a template.'
                            data={templates}
                            selected={settings.template}
                            onChange={(e) => setSettings(prev => ({ ...prev, template: e.target.value }))}
                        />
                    )}
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Style Option', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    {!hasPro && (
                        <Notice status="warning" isDismissible={false}>
                            <RawHTML>{proNotice}</RawHTML>
                        </Notice>
                    )}
                    {hasPro &&
                        <>
                            <Dropdown
                                id='storebuild_quickview_style'
                                title='Quickview Style'
                                text='Select a style.'
                                data={[
                                    { value: 'popup', label: 'Popup' },
                                    { value: 'strb-offcanvas', label: 'Offcanvas' }
                                ]}
                                selected={settings.style}
                                onChange={(e) => setSettings(prev => ({ ...prev, style: e.target.value }))}
                            />
                            {settings.style == 'strb-offcanvas' && <Input
                                id='storebuild_quickview_wrapper_width'
                                title='Quickview Wrapper Width'
                                text='Set the width of the quickview wrapper.(px)'
                                defaultValue={settings.wrapper_width}
                                type='number'
                                onChange={(e) => setSettings(prev => ({ ...prev, wrapper_width: e.target.value }))}
                            />}
                        </>
                    }
                </div>
            </Offcanvas>
        </>
    )
}