Untitled

const handleButtonStates = useCallback(
        (type, val, item, cType) => {
            const nstates = ['BtnDefault', 'BtnHovered', 'BtnPressed'];
            const nvalues = ['default', 'hovered', 'pressed'];
            const index = nstates.findIndex(obj => obj === item?.accessor);
            let newStateObj = {};
            nstates.forEach((el, i) => {
                if (i === index) {
                    newStateObj[nvalues[i]] = {
                        ...settingsState?.[el],
                        state: 'active',
                        background: type === 'background' ? val : settingsState?.[el]?.background,
                        color: type === 'color' ? val : settingsState?.[el]?.color,
                        subcolor: type === 'subcolor' ? val : settingsState?.[el]?.subcolor,
                    };
                } else {
                    newStateObj[nvalues[i]] = {
                        ...settingsState?.[el],
                        state: 'inactive',
                    };
                }
            });
            const bStyles = ['elHovered', 'elActive'];
            const allClass = component.attributes.components.models[0]?.getClasses();
            const els = allClass?.filter(item => bStyles?.includes(item));
            let _component = getComponentModel(component,"sub");
            if (els?.length) {
                _component.removeClass(els?.[0]);
            }
            const rule = getRuleName(component, cType);
            // const cid = component.attributes.components.models[0]?.getId();
            // const identifier = component.attributes.components.models[0]
            //     .getClasses()
            //     ?.find(item => {
            //         return item?.includes('btn-');
            //     });
            // const ncid = identifier ? identifier?.replace('btn-', '') : cid;
            if (item.accessor === 'BtnHovered') {
                const rule1 = getRuleName(component);
                const cmp = getComponentModel(component,'sub')
                const rule2 = getRuleName(component,"main");
                // if (!identifier) {
                //     component.attributes.components.models[0]?.addClass(`btn-${ncid}`);
                // }
                // cmp.removeClass('elActive')
                cmp.addClass('elHovered')
                // _component.addClass('elHovered');
                const hoverCss = editor.Css;
                // hoverCss.setRule(`${rule}.elButton:not(:active):not(.elActive):hover`, {
                //     'background-color': `${
                //         type === 'background' ? val : settingsState?.['BtnHovered']?.background
                //     }`,
                //     color: `${type === 'color' ? val : settingsState?.['BtnHovered']?.color}`,
                // });
                // hoverCss.setRule(`${rule}.elButton.elHovered`, {
                //     'background-color': `${
                //         type === 'background' ? val : settingsState?.['BtnHovered']?.background
                //     }`,
                //     color: `${type === 'color' ? val : settingsState?.['BtnHovered']?.color}`,
                // });
                if (type === 'background') {
                    hoverCss.setRule(`${rule}:not(:active):not(.elActive):hover`, {
                        'background-color': `${
                            type === 'background' ? val : settingsState?.['BtnHovered']?.background
                        }`,
                        // color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                    hoverCss.setRule(`${rule2} .elHovered`, {
                        'background-color': `${
                            type === 'background' ? val : settingsState?.['BtnHovered']?.background
                        }`,
                        // color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                } else if (type === 'color') {
                    hoverCss.setRule(
                        `${rule1}:not(:active):not(.elActive):hover div .elButtonPrimary`,
                        {
                            // 'background-color': `${
                            //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                            // }`,
                            color: `${
                                type === 'color' ? val : settingsState?.['BtnHovered']?.color
                            }`,
                            // subcolor: `${
                            //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                            // }`,
                        },
                    );
                    hoverCss.setRule(`${rule2} .elHovered div .elButtonPrimary`, {
                        // 'background-color': `${
                        //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        // }`,
                        color: `${type === 'color' ? val : settingsState?.['BtnHovered']?.color} !important`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                } else if (type === 'subcolor') {
                    hoverCss.setRule(
                        `${rule1}:not(:active):not(.elActive):hover div .elButtonSub`,
                        {
                            // 'background-color': `${
                            //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                            // }`,
                            // color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                            color: `${
                                type === 'subcolor' ? val : settingsState?.['BtnHovered']?.subcolor
                            }`,
                        },
                    );
                    hoverCss.setRule(`${rule2} .elHovered div .elButtonSub`, {
                        // 'background-color': `${
                        //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        // }`,
                        color: `${
                            type === 'subcolor' ? val : settingsState?.['BtnHovered']?.subcolor
                        }!important`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                }
            } else if (item?.accessor === 'BtnPressed') {
                // if (!identifier) {
                //     component.attributes.components.models[0]?.addClass(`btn-${ncid}`);
                // }
                const cmp = getComponentModel(component,'sub')
                const rule2 = getRuleName(component,"main");
                cmp.addClass('elActive')
                // _component?.addClass('elActive');
                const hoverCss = editor.Css;
                const rule1 = getRuleName(component);
                // hoverCss.setRule(`${rule}.elButton:active`, {
                //     'background-color': `${
                //         type === 'background' ? val : settingsState?.['BtnPressed']?.background
                //     }`,
                //     color: `${type === 'color' ? val : settingsState?.['BtnPressed']?.color}`,
                // });
                // hoverCss.setRule(`${rule}.elButton.elActive`, {
                //     'background-color': `${
                //         type === 'background' ? val : settingsState?.['BtnPressed']?.background
                //     }`,
                //     color: `${type === 'color' ? val : settingsState?.['BtnPressed']?.color}`,
                // });

                if (type === 'background') {
                    hoverCss.setRule(`${rule}:active`, {
                        'background-color': `${
                            type === 'background' ? val : settingsState?.['BtnPressed']?.background
                        }`,
                        // color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                    hoverCss.setRule(`${rule2} .elActive`, {
                        'background-color': `${
                            type === 'background' ? val : settingsState?.['BtnPressed']?.background
                        }`,
                        // color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                } else if (type === 'color') {
                    hoverCss.setRule(`${rule1}:active div .elButtonPrimary`, {
                        // 'background-color': `${
                        //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        // }`,
                        color: `${type === 'color' ? val : settingsState?.['BtnPressed']?.color}`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                    hoverCss.setRule(`${rule2} .elActive div .elButtonPrimary`, {
                        // 'background-color': `${
                        //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        // }`,
                        color: `${type === 'color' ? val : settingsState?.['BtnPressed']?.color} !important`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                } else if (type === 'subcolor') {
                    hoverCss.setRule(`${rule1}:active div .elButtonSub`, {
                        // 'background-color': `${
                        //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        // }`,
                        // color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                        color: `${
                            type === 'subcolor' ? val : settingsState?.['BtnPressed']?.subcolor
                        }`,
                    });
                    hoverCss.setRule(`${rule2} .elActive .elButtonSub`, {
                        // 'background-color': `${
                        //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        // }`,
                        color: `${
                            type === 'subcolor' ? val : settingsState?.['BtnPressed']?.subcolor
                        } !important`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                }
            } else if (item?.accessor === 'BtnDefault') {
                // if (!identifier) {
                //     component.attributes.components.models[0]?.addClass(`btn-${ncid}`);
                // }
                const hoverCss = editor.Css;
                if (type === 'background') {
                    hoverCss.setRule(`${rule}`, {
                        ...editor.Css.getRule(`${rule}`)?.attributes?.style,
                        'background-color': `${
                            type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        }`,
                        // color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                } else if (type === 'color') {
                    hoverCss.setRule(`${rule}`, {
                        ...editor.Css.getRule(`${rule}`)?.attributes?.style,
                        // 'background-color': `${
                        //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        // }`,
                        color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                        // subcolor: `${
                        //     type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        // }`,
                    });
                    if (
                        settingsState?.['IconDefaultBeforeColor'] === 'default' ||
                        settingsState?.['IconDefaultAfterColor'] === 'default'
                    ) {
                        let obj = {};
                        let svgDefault1 = settingsState?.['IconDefaultBeforeColor'] === 'default';
                        let svgDefault2 = settingsState?.['IconDefaultAfterColor'] === 'default';
                        if (
                            settingsState?.['IconDefaultBeforeColor'] === 'default' &&
                            settingsState?.['IconDefaultAfterColor'] === 'default'
                        ) {
                            obj = {
                                IconBeforeColor: val,
                                IconAfterColor: val,
                            };
                        } else if (settingsState?.['IconDefaultBeforeColor'] === 'default') {
                            obj = { IconBeforeColor: val };
                        } else {
                            obj = { IconAfterColor: val };
                        }
                        handleIconBeforeAfterDefault(
                            val,
                            { ...obj },
                            'fill',
                            false,
                            svgDefault1,
                            svgDefault2,
                        );
                    }
                } else if (type === 'subcolor') {
                    hoverCss.setRule(`${rule}`, {
                        ...editor.Css.getRule(`${rule}`)?.attributes?.style,
                        // 'background-color': `${
                        //     type === 'background' ? val : settingsState?.['BtnDefault']?.background
                        // }`,
                        // color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                        color: `${
                            type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                        }`,
                    });
                }
                // hoverCss.setRule(`${rule}`, {
                //     'background-color': `${
                //         type === 'background' ? val : settingsState?.['BtnDefault']?.background
                //     }`,
                //     color: `${type === 'color' ? val : settingsState?.['BtnDefault']?.color}`,
                //     subcolor: `${
                //         type === 'subcolor' ? val : settingsState?.['BtnDefault']?.subcolor
                //     }`,
                // });
            }
            dispatch({
                type: 'BtnState',
                value: {
                    ...newStateObj,
                },
            });
        },
        [component, editor?.Css, handleIconBeforeAfterDefault, settingsState],
    );