import { Offcanvas, Switch, Dropdown, Input, Media, Colorpicker } 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 MobileNav({ video, id, docs }) {
    const [enable, setEnable] = useState(false)
    const [settings, setSettings] = useState(storebuild.settings._storebuild_mobile_nav_settings);
    // console.log(storebuild.pages);
    const [modules, setModules] = useState(storebuild.pro_modules);

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

    return (
        <>
            <Widget
                title='Mobile Navigation'
                description='It will show up on mobile devices. Under footer with floating buttons.'
                toggle={false}
                settings={true}
                onChange={() => setEnable(enable => !enable)}
                isPro={true}
                active={modules?.storebuild_floating_cart || false}
            />
            <Offcanvas
                open={enable}
                onClose={() => setEnable(enable => !enable)}
                heading='Navs Settings'
                subtitle='A fixed bottom navigation bar for mobile shoppers with quick access to key store pages.'
                onSave={saveSettings}
                video={video}
                id={id}
                docs={docs}
            >
                <div className="strb-offcanvas-option">
                    <Switch
                        id='storebuild_enable_mobile_nav'
                        title='Enable / Disable'
                        text='Activate/Deactivate Mobile Nav From Here.'
                        defaultValue={settings?.enable}
                        onChange={() => setSettings(prev => ({ ...prev, enable: !settings?.enable }))}
                    />
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Icons Titles', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Input
                        id='shop_icon_title'
                        title='Shop Icon Title'
                        text='Enter the title for the shop icon.'
                        defaultValue={settings?.shop_icon_title}
                        onChange={(e) => setSettings(prev => ({ ...prev, shop_icon_title: e.target.value }))}
                        type="text"
                    />
                    {/* a dropdown for pages */}
                    <Dropdown
                        id='shop_url'
                        title='Shop URL'
                        text='Select the page for the shop url.'
                        selected={settings?.shop_url}
                        data={storebuild.pages}
                        onChange={(e) => setSettings(prev => ({ ...prev, shop_url: e.target.value }))}
                    />
                    <Input
                        id='cart_icon_title'
                        title='Cart Icon Title'
                        text='Enter the title for the cart icon.'
                        defaultValue={settings?.cart_icon_title}
                        onChange={(e) => setSettings(prev => ({ ...prev, cart_icon_title: e.target.value }))}
                        type="text"
                    />
                    <Dropdown
                        id='cart_url'
                        title='Cart URL'
                        text='Select the page for the cart url.'
                        selected={settings?.cart_url}
                        data={storebuild.pages}
                        onChange={(e) => setSettings(prev => ({ ...prev, cart_url: e.target.value }))}
                    />
                    <Input
                        id='wishlist_icon_title'
                        title='Wishlist Icon Title'
                        text='Enter the title for the wishlist icon.'
                        defaultValue={settings?.wishlist_icon_title}
                        onChange={(e) => setSettings(prev => ({ ...prev, wishlist_icon_title: e.target.value }))}
                        type="text"
                    />
                    <Dropdown
                        id='wishlist_url'
                        title='Wishlist URL'
                        text='Select the page for the wishlist url.'
                        selected={settings?.wishlist_url}
                        data={storebuild.pages}
                        onChange={(e) => setSettings(prev => ({ ...prev, wishlist_url: e.target.value }))}
                    />
                    <Input
                        id='account_icon_title'
                        title='Account Icon Title'
                        text='Enter the title for the account icon.'
                        defaultValue={settings?.account_icon_title}
                        onChange={(e) => setSettings(prev => ({ ...prev, account_icon_title: e.target.value }))}
                        type="text"
                    />
                    <Dropdown
                        id='account_url'
                        title='Account URL'
                        text='Select the page for the account url.'
                        selected={settings?.account_url}
                        data={storebuild.pages}
                        onChange={(e) => setSettings(prev => ({ ...prev, account_url: e.target.value }))}
                    />
                </div>
                <div class="strb-offcanvas-section-title">
                    <h3>{__('Styles', 'shopbuild')}</h3>
                </div>
                <div className="strb-offcanvas-option">
                    <Input
                        id='icons_size'
                        title='Icon Size'
                        text='Icon size. (px)'
                        defaultValue={settings?.icons_size}
                        onChange={(e) => setSettings(prev => ({ ...prev, icons_size: e.target.value }))}
                        type="number"
                    />
                    <Colorpicker
                        id='icons_active_color'
                        title='Icons Active Color'
                        text='Change the color of the icons.'
                        defaultValue={settings?.icons_active_color}
                        onChange={(e) => setSettings(prev => ({ ...prev, icons_active_color: e.target.value }))}
                    />
                    <Colorpicker
                        id='icons_hover_color'
                        title='Icons Hover Color'
                        text='Change the hover color of the icons.'
                        defaultValue={settings?.icons_hover_color}
                        onChange={(e) => setSettings(prev => ({ ...prev, icons_hover_color: e.target.value }))}
                    />
                    <Switch
                        id='storebuild_enable_mobile_nav_is_dark'
                        title='Dark Mode?'
                        text='Activate/Deactivate Mobile Nav Dark Mode.'
                        defaultValue={settings?.is_dark}
                        onChange={() => setSettings(prev => ({ ...prev, is_dark: !settings?.is_dark }))}
                    />
                    <Switch
                        id='storebuild_enable_mobile_nav_rounded'
                        title='Want to round?'
                        text='Activate/Deactivate Mobile Nav Rounded.'
                        defaultValue={settings?.is_rounded}
                        onChange={() => setSettings(prev => ({ ...prev, is_rounded: !settings?.is_rounded }))}
                    />
                </div>
            </Offcanvas>
        </>
    )
}