import TabHead from '../Sections/TabHead'
import SaveBar from '../common/SaveBar'
import Widget from '../widgets/Widget'
import { toast } from 'react-toastify'
import axios from 'axios'
import { useState, useEffect, lazy, Suspense } from '@wordpress/element'

// Lazy load components
const CurrencySwitcher = lazy(() => import('../modules/CurrencySwitcher'));
const SaleNotiFication = lazy(() => import('../modules/SaleNotification'));
const VariationSwatch = lazy(() => import('../modules/VariationSwatch'));
const Invoice = lazy(() => import('../modules/Invoice'));
const Quickview = lazy(() => import('../modules/Quickview'));
const Backorder = lazy(() => import('../modules/Backorder'));
const PreOrder = lazy(() => import('../modules/PreOrder'));
const QuickCheckout = lazy(() => import('../modules/QuickCheckout'));
const FlyCart = lazy(() => import('../modules/FlyCart'));
const Offer = lazy(() => import('../modules/Offer'));
const MobileNav = lazy(() => import('../modules/MobileNav'));

import { __ } from '@wordpress/i18n'

function Modules() {
    const [wishlistToggle, setWishlistToggle] = useState(storebuild.settings._storebuild_modules.storebuild_wishlist)
    const [quickviewToggle, setQuickviewToggle] = useState(storebuild.settings._storebuild_modules.storebuild_quickview)
    const [compareToggle, setCompareToggle] = useState(storebuild.settings._storebuild_modules.storebuild_compare)
    const [addToCartNotification, setAddToCartNotification] = useState(storebuild.settings._storebuild_modules.storebuild_add_to_cart_notification)
    const [saleBadge, setSaleBadge] = useState(storebuild.settings._storebuild_modules.storebuild_sale_badge)
    const [crossSell, setCrossSell] = useState(storebuild.settings._storebuild_modules.storebuild_cross_sell)
    const [upSell, setUpSell] = useState(storebuild.settings._storebuild_modules.storebuild_up_sell)
    const [flashSaleCountDown, setFlashSaleCountdown] = useState(storebuild.settings._storebuild_modules.storebuild_flash_sale_countdown)
    const [general, setGeneral] = useState(storebuild.storebuild_swatches_settings?.tpwvs_general)
    const [shop, setShop] = useState(storebuild.storebuild_swatches_settings?.tpwvs_shop)
    const [modules, setModules] = useState(storebuild.settings._storebuild_modules)
    const [proModules, setProModules] = useState(storebuild.pro_modules)
    const [baseline, setBaseline] = useState(() => JSON.stringify(storebuild.settings._storebuild_modules))
    const [saving, setSaving] = useState(false)
    const dirty = JSON.stringify(modules) !== baseline

    useEffect(() => {
        setModules({ ...modules, storebuild_wishlist: wishlistToggle })
    }, [wishlistToggle])

    useEffect(() => {
        setModules({ ...modules, storebuild_quickview: quickviewToggle })
    }, [quickviewToggle])

    useEffect(() => {
        setModules({ ...modules, storebuild_compare: compareToggle })
    }, [compareToggle])

    useEffect(() => {
        setModules({ ...modules, storebuild_add_to_cart_notification: addToCartNotification })
    }, [addToCartNotification])

    useEffect(() => {
        setModules({ ...modules, storebuild_sale_badge: saleBadge })
    }, [saleBadge])

    useEffect(() => {
        setModules({ ...modules, storebuild_cross_sell: crossSell })
    }, [crossSell])

    useEffect(() => {
        setModules({ ...modules, storebuild_up_sell: upSell })
    }, [upSell])

    useEffect(() => {
        setModules({ ...modules, storebuild_flash_sale_countdown: flashSaleCountDown })
    }, [flashSaleCountDown])

    const handleSaveSettings = (e) => {
        if (e) e.preventDefault()
        const form_data = new FormData()
        form_data.append('action', 'storebuild_save')
        form_data.append('security', storebuild.nonce)
        form_data.append('_storebuild_modules', JSON.stringify(modules))
        setSaving(true)
        axios.post(storebuild.ajax_url, form_data)
            .then(res => {
                if (res.data?.success === false) {
                    toast.error(res.data?.data?.message)
                    return;
                }
                setBaseline(JSON.stringify(modules))
                toast.success(res.data?.data?.message)
            })
            .catch(err => {
                console.log(err)
                toast.error('Something went wrong while saving.')
            })
            .finally(() => setSaving(false))
    }

    return (
        <>
            {/* modules content tab */}
            <div className="strb-features-tab-content">
                {/* Controls Top setting all */}
                <div className="strb-controls-top">
                    <TabHead
                        title='Store Modules'
                        text='Power up your store with conversion-focused features.'
                        onSave={handleSaveSettings} />
                </div>
                <div className="strb-widget-wrapper">
                    <div className="strb-widget-container">
                        <div className="strb-widget-row">
                            <Suspense fallback={<div>Loading...</div>}>
                                <div className="strb-row">
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <VariationSwatch
                                            video="https://www.youtube.com/embed/wtfCgrDvvBI?si=ROOwg3iSIcprdtBR"
                                            id='storebuild_variation_swatches'
                                            docs='https://themepure.net/plugins/woocommerce-variation-swatches/docs/'
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <SaleNotiFication
                                            video="https://www.youtube.com/embed/lyfU0rLGZkM?si=IYsaVZvYCL076FaT"
                                            id='storebuild_sale_notification'
                                            docs="https://docs.themepure.net/docs/storebuild/modules/sale-notification/"
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <CurrencySwitcher
                                            video="https://www.youtube.com/embed/paARGAnIx2Y?si=PvLqM28EVBFfQsGH"
                                            id='storebuild_currency_switcher'
                                            docs="https://docs.themepure.net/docs/storebuild/modules/currency-switcher/"
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Invoice
                                            video="https://www.youtube.com/embed/VHKr5xWEQSA?si=bGNx-Qydum2KoXPZ"
                                            id='storebuild_invoice'
                                            docs="https://docs.themepure.net/docs/storebuild/modules/invoice/"
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Widget
                                            id='storebuild_wishlist'
                                            description='User can keep products in wishlist.'
                                            title='Wishlist'
                                            toggle={true}
                                            settings={false}
                                            defaultValue={wishlistToggle}
                                            onChange={() => setWishlistToggle(wishlistToggle => !wishlistToggle)}
                                            isPro={false}
                                            active={true}
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Quickview
                                            video="https://www.youtube.com/embed/s3tj7nQhdwo?si=9A9zfHeMATlJanP4"
                                            id='storebuild_quickview'
                                            docs="https://docs.themepure.net/docs/storebuild/modules/quickview/"
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Widget
                                            id='storebuild_compare'
                                            title="Compare"
                                            description='Compare products for a better selling experience.'
                                            settings={false}
                                            toggle={true}
                                            defaultValue={compareToggle}
                                            onChange={() => setCompareToggle(compareToggle => !compareToggle)}
                                            isPro={false}
                                            active={true}
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Widget
                                            id='storebuild_add_to_cart_notification'
                                            title="Real-Time Cart Notification"
                                            description='Notify user when a product is added to cart.'
                                            settings={false}
                                            toggle={true}
                                            defaultValue={addToCartNotification}
                                            onChange={() => setAddToCartNotification(addToCartNotification => !addToCartNotification)}
                                            isPro={false}
                                            active={true}
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Widget
                                            id='storebuild_sale_badge'
                                            title="Sale Badge"
                                            description='Show sale badge on product.'
                                            settings={false}
                                            toggle={true}
                                            isPro={false}
                                            defaultValue={saleBadge}
                                            active={true}
                                            onChange={() => setSaleBadge(saleBadge => !saleBadge)}
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Widget
                                            id='storebuild_sale_countdown'
                                            title="Flash Sale Countdown"
                                            description='Show sale countdown on product.'
                                            settings={false}
                                            toggle={true}
                                            isPro={false}
                                            active={true}
                                            defaultValue={flashSaleCountDown}
                                            onChange={() => setFlashSaleCountdown(flashSaleCountDown => !flashSaleCountDown)}
                                        />
                                    </div>
                                    {/* <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Offer
                                            video="https://www.youtube.com/embed/v-kstRF253c?si=bR62IO9YoD9PRafC"
                                            id='storebuild_offer_popup'
                                        />
                                    </div> */}
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Backorder
                                            video="https://www.youtube.com/embed/0XpQwj0SfF8?si=SqfNxu-rFsogjGVf"
                                            id='storebuild_backorder'
                                            docs="https://themepure.net/plugins/storebuild/docs/backorder/"
                                        />
                                    </div>

                                    {/* pro features below */}
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <Widget
                                            id='storebuild_cross_sell_popup'
                                            title="Cart Cross Sell Popup"
                                            description='Show cross sell products on the fly when adding to cart. This will only work with woocommerce classic layout.'
                                            settings={false}
                                            toggle={true}
                                            isPro={true}
                                            active={proModules?.storebuild_cross_sell || false}
                                            defaultValue={crossSell}
                                            onChange={() => setCrossSell(crossSell => !crossSell)}
                                        />
                                    </div>

                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <PreOrder
                                            video="https://www.youtube.com/embed/pbhNlcucHLM?si=hm6zPAd5oXaJRoRo"
                                            id='storebuild_preorder'
                                            docs="https://docs.themepure.net/docs/storebuild/modules/pre-order/"
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <QuickCheckout
                                            video="https://www.youtube.com/embed/-qEJhwDZGiM?si=tQcFJ_56gVBxSx_8"
                                            id='storebuild_quick_checkout'
                                            docs="https://docs.themepure.net/docs/storebuild/modules/quick-checkout/"
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <FlyCart
                                            video="https://www.youtube.com/embed/Y_zknFAQsy8?si=IcaVP6xoiwthbqGD"
                                            id='storebuild_floating_cart'
                                        />
                                    </div>
                                    <div className="strb-col-xxl-3 strb-col-lg-4 strb-col-md-6">
                                        <MobileNav
                                            video="https://www.youtube.com/embed/gbzMRCV2eWc?si=wEz_tJuo8T8r95Ry"
                                            id='storebuild_mobile_navigation'
                                            docs="https://docs.themepure.net/docs/storebuild/modules/mobile-navigation-menu/"
                                        />
                                    </div>
                                </div>
                            </Suspense>
                        </div>
                    </div>
                </div>
                <SaveBar visible={dirty} saving={saving} onSave={handleSaveSettings} />
            </div>
        </>
    )
}

export default Modules