import TabHead from '../Sections/TabHead'
import SaveBar from '../common/SaveBar'
import { toast } from 'react-toastify'
import axios from 'axios'
import { useState } from "@wordpress/element"
import WidgetTabs from './Widgets'

function Elements() {
    const [addons, setAddons] = useState(storebuild.elements)

    const [toggleActive, setToggleActive] = useState(storebuild.settings._storebuild_settings.storebuild_enable_all_elements)
    const isProActive = Boolean(storebuild.is_pro_active)

    const [baseline, setBaseline] = useState(() => JSON.stringify({ addons, toggleActive }))
    const [saving, setSaving] = useState(false)
    const dirty = JSON.stringify({ addons, toggleActive }) !== baseline

    const handleChange = (e) => {
        setAddons({...addons, [e.target.name]:{...addons[[e.target.name]], is_active:e.target.checked}})
    }

    const headerToggle = () => {
        let newAddonsObject = {}
        setToggleActive( toggleActive => !toggleActive )
        for( const [key, value] of Object.entries(addons) ){
            let newAddons;
            if(!value?.is_pro){
                newAddons = {...value, is_active: toggleActive? false : true}
                newAddonsObject[key] = newAddons;
            }else{
                if(isProActive){
                    newAddons = {...value, is_active: toggleActive? false : true}
                    newAddonsObject[key] = newAddons;
                }else{
                    newAddonsObject[key] = value;
                }
            }
        }
        setAddons(newAddonsObject)
    }

    const handleSaveElements = (e) => {
        const form_data = new FormData()
        form_data.append('action', 'storebuild_save')
        form_data.append('security', storebuild.nonce)
        form_data.append('_storebuild_elements', JSON.stringify(addons))
        form_data.append('_storebuild_settings', JSON.stringify({storebuild_enable_all_elements:toggleActive, storebuild_enable_all_modules: true}))
        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({ addons, toggleActive }))
            toast.success(res.data?.data?.message)
        })
        .catch( err => {
            console.log(err)
            toast.error('Something went wrong while saving.')
        })
        .finally(() => setSaving(false))
    }
 
    return (
        <>
            {/* <!-- elements content tab --> */}
            <div class="strb-woo-tab-content">
                {/* Controls Top setting all */}
                <div className="strb-controls-top">
                    <TabHead 
                        title='Disable/Enable Widgets' 
                        text='You can enable or disable all options by one click.'
                        onSave={handleSaveElements}
                        onToggle={headerToggle}
                        toggle={true}
                        toggleActive={toggleActive}/>
                </div>
                <div className="strb-widget-wrapper">
                    <div className="strb-widget-container">
                        <WidgetTabs
                            addons={addons}
                            handleChange={handleChange}
                        />
                    </div>
                </div>
                <SaveBar visible={dirty} saving={saving} onSave={handleSaveElements} />
            </div>
        </>
    )
}

export default Elements