import { Offcanvas, Switch, Dropdown, Colorpicker } 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";
import { TabPanel } from '@wordpress/components';

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

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

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

    const onSelect = (tabName) => {
        console.log('Selecting tab', tabName);
    };

    return (
        <>
            <Widget
                title='Floating Cart'
                description='A floating cart that follows the user as they scroll down the page.'
                toggle={false}
                settings={true}
                onChange={() => setEnable(enable => !enable)}
                isPro={true}
                active={modules?.storebuild_floating_cart || false}
            />
            <Offcanvas
                open={enable}
                onClose={() => setEnable(enable => !enable)}
                heading='Floating Cart Settings'
                subtitle='A sticky cart icon that follows users as they scroll, keeping checkout always one tap away.'
                onSave={saveSettings}
                video={video}
                id={id}
                docs={docs}
            >
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_floating_cart_module'
                        title='Enable / Disable'
                        text='Activate/Deactivate Floating Cart System.'
                        defaultValue={settings?.enable}
                        onChange={() => setSettings(prev => ({ ...prev, enable: !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_floating_in_shop'
                        title='Show in shop?'
                        text=''
                        defaultValue={settings?.shop}
                        onChange={() => setSettings(prev => ({ ...prev, shop: !settings?.shop }))}
                    />
                </div>
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_floating_in_single'
                        title='Show in product single?'
                        text=''
                        defaultValue={settings?.single}
                        onChange={() => setSettings(prev => ({ ...prev, single: !settings?.single }))}
                    />
                </div>
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_floating_in_all'
                        title='Show in all pages?'
                        text=''
                        defaultValue={settings?.all_page}
                        onChange={() => setSettings(prev => ({ ...prev, all_page: !settings?.all_page }))}
                    />
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Styles', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Dropdown
                        id='storebuild_floating_position'
                        title='Floating Position'
                        text='Select a position.'
                        data={[
                            { value: 'bottom-right', label: 'Bottom Right' },
                            { value: 'right-middle', label: 'Right Middle' },
                            { value: 'left-middle', label: 'Left Middle' },
                            { value: 'left-bottom', label: 'Left Bottom' },
                        ]}
                        selected={settings?.position}
                        onChange={(e) => setSettings(prev => ({ ...prev, position: e.target.value }))}
                    />
                </div>
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_floating_animation'
                        title='Cart animation?'
                        text=''
                        defaultValue={settings?.animation}
                        onChange={() => setSettings(prev => ({ ...prev, animation: !settings?.animation }))}
                    />
                </div>
                <div className="strb-offcanvas-option">
                    {!hasPro && (
                        <Notice status="warning" isDismissible={false}>
                            <RawHTML>{proNotice}</RawHTML>
                        </Notice>
                    )}

                    {hasPro && <TabPanel
                        className="strb-settings-tab-panel"
                        activeClass="active-tab"
                        onSelect={onSelect}
                        tabs={[
                            {
                                name: 'normal',
                                title: 'Normal',
                                className: 'strb-tab-btn normal-tab',
                            },
                            {
                                name: 'hover',
                                title: 'Hover',
                                className: 'strb-tab-btn hover-tab',
                            },
                        ]}
                    >
                        {(tab) => (
                            tab.name === 'normal' ? (
                                <div>
                                    <Colorpicker
                                        title='Viewcart Button Background Color'
                                        text='Change the Viewcart Button background color.'
                                        id='viewcart_btn_background'
                                        defaultValue={settings?.offcanvas_viewcart_btn?.bg_color}
                                        onChange={(e) => setSettings(prev => ({ ...prev, offcanvas_viewcart_btn: { ...prev.offcanvas_viewcart_btn, bg_color: e.target.value } }))}
                                    />
                                    <Colorpicker
                                        title='Viewcart Button Text Color'
                                        text='Change the Viewcart Button text color.'
                                        id='viewcart_btn_font_color'
                                        defaultValue={settings?.offcanvas_viewcart_btn?.color}
                                        onChange={(e) => setSettings(prev => ({ ...prev, offcanvas_viewcart_btn: { ...prev.offcanvas_viewcart_btn, color: e.target.value } }))}
                                    />

                                    <Colorpicker
                                        title='Checkout Button Background Color'
                                        text='Change the Checkout Button background color.'
                                        id='checkout_btn_background'
                                        defaultValue={settings?.offcanvas_checkout_btn?.bg_color}
                                        onChange={(e) => setSettings(prev => ({ ...prev, offcanvas_checkout_btn: { ...prev.offcanvas_checkout_btn, bg_color: e.target.value } }))}
                                    />
                                    <Colorpicker
                                        title='Checkout Button Text Color'
                                        text='Change the Checkout Button text color.'
                                        id='checkout_btn_font_color'
                                        defaultValue={settings?.offcanvas_checkout_btn?.color}
                                        onChange={(e) => setSettings(prev => ({ ...prev, offcanvas_checkout_btn: { ...prev.offcanvas_checkout_btn, color: e.target.value } }))}
                                    />
                                </div>
                            )
                                : (
                                    <div>
                                        <Colorpicker
                                            title='Viewcart Button Background Color'
                                            text='Change the Viewcart Button background color.'
                                            id='viewcart_btn_background'
                                            defaultValue={settings?.offcanvas_viewcart_btn_hover?.bg_color}
                                            onChange={(e) => setSettings(prev => ({ ...prev, offcanvas_viewcart_btn_hover: { ...prev.offcanvas_viewcart_btn_hover, bg_color: e.target.value } }))}
                                        />
                                        <Colorpicker
                                            title='Viewcart Button Text Color'
                                            text='Change the Viewcart Button text color.'
                                            id='viewcart_btn_font_color'
                                            defaultValue={settings?.offcanvas_viewcart_btn_hover?.color}
                                            onChange={(e) => setSettings(prev => ({ ...prev, offcanvas_viewcart_btn_hover: { ...prev.offcanvas_viewcart_btn_hover, color: e.target.value } }))}
                                        />

                                        <Colorpicker
                                            title='Checkout Button Background Color'
                                            text='Change the Checkout Button background color.'
                                            id='checkout_btn_background'
                                            defaultValue={settings?.offcanvas_checkout_btn_hover?.bg_color}
                                            onChange={(e) => setSettings(prev => ({ ...prev, offcanvas_checkout_btn_hover: { ...prev.offcanvas_checkout_btn_hover, bg_color: e.target.value } }))}
                                        />
                                        <Colorpicker
                                            title='Checkout Button Text Color'
                                            text='Change the Checkout Button text color.'
                                            id='checkout_btn_font_color'
                                            defaultValue={settings?.offcanvas_checkout_btn_hover?.color}
                                            onChange={(e) => setSettings(prev => ({ ...prev, offcanvas_checkout_btn_hover: { ...prev.offcanvas_checkout_btn_hover, color: e.target.value } }))}
                                        />
                                    </div>
                                )
                        )}
                    </TabPanel>}

                </div>
            </Offcanvas>
        </>
    )
}