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

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

    const saveSettings = () => {
        apiFetch({
            path: '/wp/v2/settings',
            method: 'POST',
            data: {
                _storebuild_offer_popup_data: 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='Popup'
                description='This is a popup system that will help you to increase your sales. Show your offers, discounts, and more.'
                toggle={false}
                settings={true}
                onChange={() => setEnable(enable => !enable)}
                isPro={false}
                active={true}
            />
            <Offcanvas
                open={enable}
                onClose={() => setEnable(enable => !enable)}
                heading='Popup Settings'
                subtitle='Display targeted popups with offers, discounts, and announcements to drive more conversions.'
                onSave={saveSettings}
                video={video}
                id={id}
                docs={docs}
            >
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_popup_module'
                        title='Enable / Disable'
                        text='Activate/Deactivate Popup System.'
                        defaultValue={settings?.enable_popup}
                        onChange={() => setSettings(prev => ({ ...prev, enable_popup: !settings?.enable }))}
                    />
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Pages You Want To Active?', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_popup_in_shop'
                        title='Show in shop?'
                        text=''
                        defaultValue={settings?.show_in_shop}
                        onChange={() => setSettings(prev => ({ ...prev, show_in_shop: !settings?.show_in_shop }))}
                    />
                </div>
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_popup_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 className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_popup_in_all'
                        title='Show in all pages?'
                        text=''
                        defaultValue={settings?.show_in_all}
                        onChange={() => setSettings(prev => ({ ...prev, show_in_all: !settings?.show_in_all }))}
                    />
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Popup Contents', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_elementor_content'
                        title='Enable elementor content?'
                        text='Build your popup with elementor and add it here.'
                        defaultValue={settings?.storebuild_use_elementor_template}
                        onChange={() => setSettings(prev => ({ ...prev, storebuild_use_elementor_template: !settings?.storebuild_use_elementor_template }))}
                    />
                    {(settings?.storebuild_use_elementor_template && !hasPro) && (
                        <Notice status="warning" isDismissible={false}>
                            <RawHTML>{proNotice}</RawHTML>
                        </Notice>
                    )}

                    {(settings?.storebuild_use_elementor_template && hasPro) && <Dropdown
                        id='storebuild_elementor_template'
                        title='Elementor Templates'
                        text='Select a template for popup.'
                        data={templates}
                        selected={settings?.storebuild_elementor_template}
                        onChange={(e) => setSettings(prev => ({ ...prev, storebuild_elementor_template: e.target.value }))}
                    />}

                    {!settings?.storebuild_use_elementor_template && <>
                        <Media
                            title='Content Image'
                            text='Upload a Content image.'
                            defaultValue={settings?.popup_image?.url}
                            onChange={(attachment) => setSettings(prev => ({ ...prev, popup_image: { url: attachment?.url, alt: attachment?.alt } }))}
                        />
                        <Input
                            id='storebuild_popup_subtitle'
                            title='Subtitle'
                            text='Enter a title.'
                            defaultValue={settings?.popup_subtitle}
                            onChange={(e) => setSettings(prev => ({ ...prev, popup_subtitle: e.target.value }))}
                        />
                        <Input
                            id='storebuild_popup_title'
                            title='Title'
                            text='Enter a title.'
                            defaultValue={settings?.popup_title}
                            onChange={(e) => setSettings(prev => ({ ...prev, popup_title: e.target.value }))}
                        />
                        <Input
                            id='storebuild_popup_window_title'
                            title='Window Title'
                            text='It will show up on a window bar and will be toggle.'
                            defaultValue={settings?.storebuild_offer_popup_title}
                            onChange={(e) => setSettings(prev => ({ ...prev, storebuild_offer_popup_title: e.target.value }))}
                        />
                        <Input
                            id='storebuild_popup_content'
                            title='Content'
                            text='Enter little contents.'
                            defaultValue={settings?.popup_content}
                            onChange={(e) => setSettings(prev => ({ ...prev, popup_content: e.target.value }))}
                            type="textarea"
                        />
                        <Input
                            id='storebuild_popup_coupon'
                            title='Coupon Code'
                            text='Enter your coupon code.'
                            defaultValue={settings?.popup_coupon}
                            onChange={(e) => setSettings(prev => ({ ...prev, popup_coupon: e.target.value }))}
                            type="text"
                        />
                    </>}
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Styles', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Input
                        id='storebuild_offer_popup_width'
                        title='Width'
                        text='Width of the popup. (px)'
                        defaultValue={settings?.storebuild_offer_popup_width}
                        onChange={(e) => setSettings(prev => ({ ...prev, storebuild_offer_popup_width: e.target.value }))}
                        type="number"
                    />
                    <Input
                        id='storebuild_offer_popup_height'
                        title='Height'
                        text='Height of the popup. (px)'
                        defaultValue={settings?.storebuild_offer_popup_height}
                        onChange={(e) => setSettings(prev => ({ ...prev, storebuild_offer_popup_height: e.target.value }))}
                        type="number"
                    />
                </div>
            </Offcanvas>
        </>
    )
}