import {useEffect, useState} from "@wordpress/element";
import {notifications} from "@mantine/notifications";
import axios from "axios";
import {
    IconAlertTriangle,
    IconCheck, IconChevronDown, IconCloudUpload,
    IconServer,
    IconSpace,
    IconSpacingHorizontal,
    IconSpacingVertical, IconTrash,
    IconUpload,
    IconX
} from "@tabler/icons-react";
import {
    Accordion, ActionIcon,
    Box,
    Button,
    ColorInput, Divider,
    Flex, Grid,
    Group, Image,
    LoadingOverlay, NumberInput,
    rem,
    ScrollArea, Select, SimpleGrid, Skeleton,
    Stack, Switch,
    Tabs,
    Text, TextInput, useMantineTheme
} from "@mantine/core";

import {Dropzone, MIME_TYPES} from "@mantine/dropzone";
import {modals} from "@mantine/modals";
import {isNotEmpty, useForm} from "@mantine/form";
import {useViewportSize} from "@mantine/hooks";

const ComponentCustomization = ({layout, setReloadPageList}) => {
    const {height, width} = useViewportSize();
    const [activeLayout, setActiveLayout] = useState(layout);
    const [isSubmit, setIsSubmit] = useState(false);
    const [categories, setCategories] = useState([]);
    const [tags, setTags] = useState([]);
    const [bannerImage, setBannerImage] = useState([]);
    const [selectGroup, setSelectGroup] = useState(
        activeLayout.customize_properties.hasOwnProperty('categories') ? 'Categories' : (activeLayout.customize_properties.hasOwnProperty('tags') ? 'Tags' : 'Categories' )
    );
    const theme = useMantineTheme();

    useEffect(() => {
        setActiveLayout(layout);
    }, [layout]);

    const getCategories = () => {
        axios({
            method: 'get',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/categories`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
        })
            .then(res => {
                setCategories(res.data)

            })
            .catch(function (err) {
                console.log(err);
            });
    }

    const getTags = () => {
        axios({
            method: 'get',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/tags`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
        })
            .then(res => {
                setTags(res.data)

            })
            .catch(function (err) {
                console.log(err);
            });
    }

    useEffect(() => {
        if("Woo_BannerCategory" === layout.properties.class_type || "Woo_Category" === layout.properties.class_type || "Woo_CategoryProduct" === layout.properties.class_type){
            getCategories()
            getTags()
        }
    }, []);


    const form = useForm({
        initialValues: {
            component_id: '',
            name: '',
            category: '',
            image: '',
            button_text: '',
            button_color: '',
        },

        validate: {
            name: isNotEmpty('Required!'),
            category: isNotEmpty('Required!'),
            image: isNotEmpty('Required!'),
        },
    });






    const saveData = () => {
        setIsSubmit(true);

        const notificationId = notifications.show({
            color: theme.primaryColor + '.2',
            loading: true,
            title: 'Processing...',
            autoClose: false,
            withCloseButton: false,
        });
        axios({
            method: 'put',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/page/component`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
            data: activeLayout
        })
            .then(res => {
                notifications.update({
                    id: notificationId,
                    color: theme.primaryColor,
                    title:'Saved!',
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,

                });
                setReloadPageList(prevState => !prevState);
                setIsSubmit(false);
            })
            .catch(function (err) {
                console.log(err);
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-red-9)',
                    title: err.response.data.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,

                });
                setIsSubmit(false);
            });
    }


    const addBanner = () => {

        form.values.component_id = activeLayout.id

        const notificationId = notifications.show({
            color: theme.primaryColor + '.2',
            loading: true,
            title: 'Processing...',
            autoClose: false,
            withCloseButton: false,
        });
        axios({
            method: 'post',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/page/update-component/banner-slider`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `multipart/form-data`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
            data: form.values
        })
            .then(res => {
                notifications.update({
                    id: notificationId,
                    color: theme.primaryColor,
                    title:'Saved!',
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
                setActiveLayout({
                    ...activeLayout,
                    customize_properties: {
                        ...activeLayout.customize_properties,
                        items: [
                            ...activeLayout.customize_properties.items,
                            res.data.data
                        ]
                    }
                })
                form.reset();
                setBannerImage([]);
                setReloadPageList(prevState => !prevState);

            })
            .catch(function (err) {
                console.log(err);
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-red-9)',
                    title: err.response.data.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            });
    }

    const removeBannerSlide = (params) => {

        modals.openConfirmModal({
            title: 'Are you sure?',
            centered: true,
            children: "",
            labels: { confirm: 'Yes', cancel: "No" },
            confirmProps: { color: theme.primaryColor },
            withCloseButton: false,
            overlayProps: {
                blur: 1,
            },
            closeOnClickOutside: false,
            onCancel: () => console.log('Cancel'),
            onConfirm: () => {
                axios({
                    method: 'delete',
                    url: `${appLocalizer.apiUrl}/appza/web/api/v1/page/update-component/banner-slider`,
                    headers: {
                        "Accept": `application/json`,
                        "Content-Type": `application/json`,
                        "Access-Control-Allow-Origin": '*',
                        "X-WP-Nonce": `${appLocalizer.nonce}`
                    },
                    data: params
                })
                    .then(res => {
                        notifications.show({
                            color: theme.primaryColor,
                            title: res.data.message,
                            icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                            loading: false,
                            autoClose: 5000,
                            withCloseButton: true,
                        });

                        activeLayout.customize_properties.items.splice(params.slide_position, 1)

                        setActiveLayout({
                            ...activeLayout,
                            customize_properties: {
                                ...activeLayout.customize_properties,
                                items: activeLayout.customize_properties.items
                            }
                        })

                        setReloadPageList(prevState => !prevState);



                    })
                    .catch(function (err) {
                        console.log(err);
                        notifications.show({
                            color: 'var(--mantine-color-red-9)',
                            title: err.response.data.message,
                            icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                            loading: false,
                            autoClose: 5000,
                            withCloseButton: true,
                        });
                    });
            },
        });
    }

    const updateBannerSlider = (params) => {
        axios({
            method: 'put',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/page/update-component/banner-slider`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
            data: params
        })
            .then(res => {
                notifications.show({
                    color: theme.primaryColor,
                    title: res.data.message,
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });

                activeLayout.customize_properties.items[params['slide_position']] = params['data']

                setActiveLayout({
                    ...activeLayout,
                    customize_properties: {
                        ...activeLayout.customize_properties,
                        items: activeLayout.customize_properties.items
                    }
                })

                setReloadPageList(prevState => !prevState);



            })
            .catch(function (err) {
                console.log(err);
                notifications.show({
                    color: 'var(--mantine-color-red-9)',
                    title: err.response.data.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            });
    }

    const bannerImagePreview = bannerImage?.map((file, index) => {
        const imageUrl = URL.createObjectURL(file);
        return <Image fit="cover" w={`90%`} h={`100%`} key={index} src={imageUrl} onLoad={() => URL.revokeObjectURL(imageUrl)} />;
    });
    return (
        <Box pt="sm" pos="relative">
            {/*<LoadingOverlay visible={!activeLayout} zIndex={1000} overlayProps={{radius: "sm", blur: 5}} loaderProps={{type: 'dots', size: 'sm'}}/>*/}
            <LoadingOverlay visible={!activeLayout} zIndex={1000} overlayProps={{radius: "sm", blur: 5}} loaderProps={{size: 'sm'}}/>
            <Tabs
                variant="pills"
                defaultValue="properties"
                px="sm"
                pb="sm"
            >
                <Tabs.List grow bg={`gray.1`} mb="xs">
                    <Tabs.Tab value="properties">Properties</Tabs.Tab>
                    <Tabs.Tab value="options">Options</Tabs.Tab>
                    <Tabs.Tab value="action">Action</Tabs.Tab>
                </Tabs.List>
                <ScrollArea h={height- 215} scrollbarSize={3}>
                    <Tabs.Panel value="properties">
                        <Accordion
                            mt={`sm`}
                            chevronPosition="right"
                            variant="contained"
                            mb={`sm`}
                            defaultValue="General"
                            styles={{
                                content: {
                                    paddingLeft: 0,
                                    paddingRight: 0,
                                    paddingBottom: 0,
                                }
                            }}
                        >
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={`General`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>General</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                                mb={5}
                                                p={5}

                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                        <Text fz={14}>Horizontal</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_x: "0",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_x == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={35}
                                                        h={36}
                                                        radius={4}
                                                        p={0}
                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12}>0</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_x: "4",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_x == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={41}
                                                        h={36}
                                                        radius={4}
                                                        p={0}
                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12}>4</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_x: "8",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_x == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={41}
                                                        h={36}
                                                        radius={4}
                                                        p={0}
                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12}>8</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_x: "16",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_x == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={56}
                                                        h={36}
                                                        radius={4}
                                                        p={0}

                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12} px={2}>16</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_x: "24",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_x == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={72}
                                                        h={36}
                                                        radius={4}
                                                        p={0}

                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12} px={10}>24</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>
                                                </Flex>
                                            </Flex>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                                p={5}
                                                mb={5}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                        <Text fz={14}>Vertical</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_y: "0",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_y == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={40}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={0}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>0</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_y: "4",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_y == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={50}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={0}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>4</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_y: "8",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_y == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={50}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={0}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>8</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_y: "16",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_y == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={58}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={5}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>16</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>


                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        margin_y: "24",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.margin_y == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={74}
                                                        w={31}

                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={12}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>24</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                        </Flex>
                                                    </Button>
                                                </Flex>
                                            </Flex>
                                        </Box>

                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                                p={5}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                        <Text fz={14}>Horizontal</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_x: "0",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_x == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={35}
                                                        h={36}
                                                        radius={4}
                                                        p={0}
                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12}>0</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_x: "4",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_x == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={41}
                                                        h={36}
                                                        radius={4}
                                                        p={0}
                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12}>4</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_x: "8",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_x == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={41}
                                                        h={36}
                                                        radius={4}
                                                        p={0}
                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12}>8</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_x: "16",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_x == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={56}
                                                        h={36}
                                                        radius={4}
                                                        p={0}

                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12} px={2}>16</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>


                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_x: "24",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_x == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={72}
                                                        h={36}
                                                        radius={4}
                                                        p={0}

                                                    >
                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                        <Text fz={12} px={10}>24</Text> <IconSpace
                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                    </Button>
                                                </Flex>
                                            </Flex>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                                p={5}

                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                        <Text fz={14}>Vertical</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_y: "0",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_y == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={40}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={0}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>0</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_y: "4",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_y == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={50}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={0}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>4</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_y: "8",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_y == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={58}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={5}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>8</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>


                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_y: "16",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_y == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={58}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={5}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>16</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>


                                                        </Flex>
                                                    </Button>


                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        padding_y: "24",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.padding_y == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        radius={4}
                                                        p={0}
                                                        h={74}
                                                        w={31}

                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={12}
                                                        >
                                                            <IconSpace size={12}/> <Text fz={12}>24</Text> <IconSpace
                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                        </Flex>
                                                    </Button>
                                                </Flex>

                                            </Flex>
                                        </Box>
                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={5}
                                                p={5}
                                            >
                                                <Text fz={14}>Width</Text>
                                                <Flex
                                                    align="center"
                                                    justify="flex-end"
                                                    gap={5}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_width: "0"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_width == 0 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-gray-4)"
                                                        p={4}
                                                        w={67}
                                                        h={27}
                                                    >
                                                        <Text c={`dark.9`} fz={12}>No Border</Text>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_width: "1"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_width == 1 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-gray-4)"
                                                        p={4}
                                                        w={56}
                                                        h={27}

                                                    >
                                                        <Box bg={activeLayout?.customize_styles?.general_decoration?.border_color} h={1} w={48}></Box>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_width: "2"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_width == 2 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-gray-4)"
                                                        p={4}
                                                        w={56}
                                                        h={27}

                                                    >
                                                        <Box bg={activeLayout?.customize_styles?.general_decoration?.border_color} h={2} w={48}></Box>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_width: "3"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_width == 3 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-gray-4)"
                                                        p={4}
                                                        w={56}
                                                        h={27}

                                                    >
                                                        <Box bg={activeLayout?.customize_styles?.general_decoration?.border_color} h={3} w={48}></Box>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_width: "4"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_width == 4 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-gray-4)"
                                                        p={4}
                                                        w={56}
                                                        h={27}
                                                    >
                                                        <Box bg={activeLayout?.customize_styles?.general_decoration?.border_color} h={4} w={48}></Box>
                                                    </Button>
                                                </Flex>
                                            </Flex>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                gap={`md`}
                                                p={5}
                                            >
                                                <Text fz={14}>Color</Text>

                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: activeLayout?.customize_styles?.general_decoration?.border_color,
                                                            height: 36,
                                                            width: 36,
                                                            color: "transparent",
                                                        },
                                                    }}
                                                    variant="unstyled"
                                                    disallowInput
                                                    leftSection={` `}
                                                    leftSectionWidth={0}
                                                    rightSection={` `}
                                                    rightSectionWidth={0}
                                                    defaultValue=""
                                                    value=""
                                                    onChangeEnd={(value) => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_decoration: {
                                                                    ...activeLayout.customize_styles.general_decoration,
                                                                    border_color: value
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                            <Flex
                                                p={5}
                                                align="center"
                                                justify="space-between"
                                            >
                                                <Text fz={14}>Radius</Text>
                                                <Flex
                                                    align="center"
                                                    justify="flex-end"
                                                    gap={5}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_radius: "0"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_radius == 0 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color={`gray.4`}
                                                        p={4}
                                                        w={56}
                                                        h={27}
                                                        radius={0}
                                                    >
                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                    </Button>
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_radius: "10"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_radius == 10 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color={`gray.4`}
                                                        p={4}
                                                        w={56}
                                                        h={27}
                                                        radius={4}

                                                    >
                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                    </Button>
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_radius: "20"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_radius == 20 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color={`gray.4`}
                                                        p={4}
                                                        w={56}
                                                        h={27}
                                                        radius={8}

                                                    >
                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                    </Button>
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_radius: "30"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_radius == 30 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color={`gray.4`}
                                                        p={4}
                                                        w={56}
                                                        h={27}
                                                        radius={12}
                                                    >
                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                    </Button>
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_decoration: {
                                                                        ...activeLayout.customize_styles.general_decoration,
                                                                        border_radius: "40"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_decoration?.border_radius == 40 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                        type="button"
                                                        variant="outline"
                                                        color={`gray.4`}
                                                        p={4}
                                                        w={56}
                                                        h={27}
                                                        radius={16}
                                                    >
                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                    </Button>
                                                </Flex>

                                            </Flex>
                                        </Box>

                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                p={5}
                                            >
                                                <Text fz={14}>Shadow</Text>
                                                <Flex
                                                    align="center"
                                                    justify="flex-end"
                                                    color="gray"
                                                    gap={`md`}
                                                >
                                                    <Box
                                                        h={46}
                                                        w={46}
                                                        p={5}
                                                        style={{
                                                            border: `1px solid ${activeLayout?.customize_styles?.general_decoration?.shadow_blur_radius == 0 ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                            borderRadius: 4
                                                        }}>
                                                        <ActionIcon
                                                            onClick={() => {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_styles: {
                                                                        ...activeLayout.customize_styles,
                                                                        general_decoration: {
                                                                            ...activeLayout.customize_styles.general_decoration,
                                                                            shadow_offset_x: "0",
                                                                            shadow_offset_y: "0",
                                                                            shadow_blur_radius: "0",
                                                                        }
                                                                    }
                                                                })
                                                            }}
                                                            style={{boxShadow: 'var(--mantine-color-gray-4) 0px 4px 4px 0px'}}
                                                            variant="white" radius={2} aria-label="Icon"
                                                            w={`100%`}
                                                            h={`100%`}
                                                        >
                                                        </ActionIcon>
                                                    </Box>
                                                    <Box
                                                        h={46}
                                                        w={46}
                                                        p={5}
                                                        style={{
                                                            border: `1px solid ${activeLayout?.customize_styles?.general_decoration?.shadow_blur_radius == 5 ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                            borderRadius: 4
                                                        }}>
                                                        <ActionIcon
                                                            onClick={() => {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_styles: {
                                                                        ...activeLayout.customize_styles,
                                                                        general_decoration: {
                                                                            ...activeLayout.customize_styles.general_decoration,
                                                                            shadow_offset_x: "0",
                                                                            shadow_offset_y: "0",
                                                                            shadow_blur_radius: "5",
                                                                        }
                                                                    }
                                                                })
                                                            }}
                                                            style={{boxShadow: 'var(--mantine-color-gray-4) 0px 4px 8px 0px'}}
                                                            variant="white" radius={2} aria-label="Icon"
                                                            w={`100%`}
                                                            h={`100%`}
                                                        >
                                                        </ActionIcon>
                                                    </Box>
                                                    <Box
                                                        h={46}
                                                        w={46}
                                                        p={5}
                                                        style={{
                                                            border: `1px solid ${activeLayout?.customize_styles?.general_decoration?.shadow_blur_radius == 10 ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                            borderRadius: 4
                                                        }}>
                                                        <ActionIcon
                                                            onClick={() => {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_styles: {
                                                                        ...activeLayout.customize_styles,
                                                                        general_decoration: {
                                                                            ...activeLayout.customize_styles.general_decoration,
                                                                            shadow_offset_x: "0",
                                                                            shadow_offset_y: "0",
                                                                            shadow_blur_radius: "10",
                                                                        }
                                                                    }
                                                                })
                                                            }}
                                                            style={{boxShadow: 'var(--mantine-color-gray-4) 0px 4px 16px 0px'}}
                                                            variant="white" radius={2} aria-label="Icon"
                                                            w={`100%`}
                                                            h={`100%`}
                                                        >
                                                        </ActionIcon>
                                                    </Box>
                                                    <Box
                                                        h={46}
                                                        w={46}
                                                        p={5}
                                                        style={{
                                                            border: `1px solid ${activeLayout?.customize_styles?.general_decoration?.shadow_blur_radius == 15 ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                            borderRadius: 4
                                                        }}>
                                                        <ActionIcon
                                                            onClick={() => {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_styles: {
                                                                        ...activeLayout.customize_styles,
                                                                        general_decoration: {
                                                                            ...activeLayout.customize_styles.general_decoration,
                                                                            shadow_offset_x: "0",
                                                                            shadow_offset_y: "0",
                                                                            shadow_blur_radius: "15",
                                                                        }
                                                                    }
                                                                })
                                                            }}
                                                            style={{boxShadow: 'var(--mantine-color-gray-4) 0px 4px 24px 0px'}}
                                                            variant="white" radius={2} aria-label="Icon"
                                                            w={`100%`}
                                                            h={`100%`}
                                                        >
                                                        </ActionIcon>
                                                    </Box>
                                                </Flex>
                                            </Flex>
                                        </Box>

                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                p={5}
                                            >
                                                <Text fz={14}>Color</Text>
                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: activeLayout?.customize_styles?.general_decoration?.background_color,
                                                            height: 36,
                                                            width: 36,
                                                            color: "transparent",
                                                        },
                                                    }}
                                                    variant="unstyled"
                                                    disallowInput
                                                    leftSection={` `}
                                                    leftSectionWidth={0}
                                                    rightSection={` `}
                                                    rightSectionWidth={0}
                                                    defaultValue=""
                                                    value=""
                                                    onChangeEnd={(value) => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_decoration: {
                                                                    ...activeLayout.customize_styles.general_decoration,
                                                                    background_color: value
                                                                }
                                                            },
                                                        })
                                                    }}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                        </Box>
                                    </ScrollArea>
                                </Accordion.Panel>
                            </Accordion.Item>
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={`Items`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>Items</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Accordion
                                            chevronPosition="right"
                                            variant="contained"
                                            styles={{
                                                content: {
                                                    paddingLeft: 0,
                                                    paddingRight: 0
                                                },
                                                label: {
                                                    paddingTop: 5,
                                                    paddingBottom: 5
                                                },
                                                item: {
                                                    border: 'none'
                                                }
                                            }}
                                        >
                                            { activeLayout?.customize_styles?.box_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Box`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Box</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_x: "0",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_x == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={35}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>0</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_x: "4",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_x == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={41}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>4</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_x: "8",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_x == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={41}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >

                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>8</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_x: "16",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_x == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={56}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}

                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12} px={2}>16</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>


                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_x: "24",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_x == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={72}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}

                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12} px={10}>24</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_y: "0",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_y == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={40}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>0</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_y: "4",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_y == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={50}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>4</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_y: "8",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_y == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={50}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>8</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_y: "16",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_y == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={58}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={5}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>16</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>


                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        margin_y: "24",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.margin_y == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={74}
                                                                        w={31}

                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={12}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>24</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_x: "0",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_x == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={35}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>0</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_x: "4",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_x == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={41}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>4</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_x: "8",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_x == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={41}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>8</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_x: "16",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_x == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={56}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}

                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12} px={2}>16</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_x: "24",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_x == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={72}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}

                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12} px={10}>24</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_y: "0",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_y == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={40}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>0</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_y: "4",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_y == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={50}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>4</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_y: "8",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_y == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={50}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>8</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_y: "16",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_y == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={58}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={5}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>16</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>


                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        padding_y: "24",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.padding_y == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={74}
                                                                        w={31}

                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={12}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>24</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Width</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_width: "0"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_width == 0 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-gray-4)"
                                                                        p={4}
                                                                        w={67}
                                                                        h={27}
                                                                    >
                                                                        <Text c={`dark.9`} fz={12}>No Border</Text>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_width: "1"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_width == 1 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-gray-4)"
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}

                                                                    >
                                                                        <Box
                                                                            bg={activeLayout?.customize_styles?.box_decoration?.border_color}
                                                                            h={1} w={48}></Box>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_width: "2"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_width == 2 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-gray-4)"
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}

                                                                    >
                                                                        <Box
                                                                            bg={activeLayout?.customize_styles?.box_decoration?.border_color}
                                                                            h={2} w={48}></Box>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_width: "3"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_width == 3 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-gray-4)"
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}

                                                                    >
                                                                        <Box
                                                                            bg={activeLayout?.customize_styles?.box_decoration?.border_color}
                                                                            h={3} w={48}></Box>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_width: "4"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_width == 4 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-gray-4)"
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                    >
                                                                        <Box
                                                                            bg={activeLayout?.customize_styles?.box_decoration?.border_color}
                                                                            h={4} w={48}></Box>
                                                                    </Button>
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.box_decoration?.border_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                box_decoration: {
                                                                                    ...activeLayout.customize_styles.box_decoration,
                                                                                    border_color: value
                                                                                }
                                                                            }
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_radius: "0"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_radius == 0 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={0}
                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_radius: "10"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_radius == 10 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={4}

                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_radius: "20"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_radius == 20 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={8}

                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_radius: "30"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_radius == 30 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={12}
                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    box_decoration: {
                                                                                        ...activeLayout.customize_styles.box_decoration,
                                                                                        border_radius: "40"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.box_decoration?.border_radius == 40 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={16}
                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    <Box
                                                                        h={46}
                                                                        w={46}
                                                                        p={5}
                                                                        style={{
                                                                            border: `1px solid ${activeLayout?.customize_styles?.box_decoration?.shadow_blur_radius == 0 ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                            borderRadius: 4
                                                                        }}>
                                                                        <ActionIcon
                                                                            onClick={() => {
                                                                                setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_styles: {
                                                                                        ...activeLayout.customize_styles,
                                                                                        box_decoration: {
                                                                                            ...activeLayout.customize_styles.box_decoration,
                                                                                            shadow_offset_x: "0",
                                                                                            shadow_offset_y: "0",
                                                                                            shadow_blur_radius: "0"
                                                                                        }
                                                                                    }
                                                                                })
                                                                            }}
                                                                            style={{boxShadow: 'var(--mantine-color-gray-4) 0px 4px 4px 0px'}}
                                                                            variant="white" radius={2} aria-label="Icon"
                                                                            w={`100%`}
                                                                            h={`100%`}
                                                                        >
                                                                        </ActionIcon>
                                                                    </Box>
                                                                    <Box
                                                                        h={46}
                                                                        w={46}
                                                                        p={5}
                                                                        style={{
                                                                            border: `1px solid ${activeLayout?.customize_styles?.box_decoration?.shadow_blur_radius == 5 ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                            borderRadius: 4
                                                                        }}>
                                                                        <ActionIcon
                                                                            onClick={() => {
                                                                                setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_styles: {
                                                                                        ...activeLayout.customize_styles,
                                                                                        box_decoration: {
                                                                                            ...activeLayout.customize_styles.box_decoration,
                                                                                            shadow_offset_x: "0",
                                                                                            shadow_offset_y: "0",
                                                                                            shadow_blur_radius: "5"
                                                                                        }
                                                                                    }
                                                                                })
                                                                            }}
                                                                            style={{boxShadow: 'var(--mantine-color-gray-4) 0px 4px 8px 0px'}}
                                                                            variant="white" radius={2} aria-label="Icon"
                                                                            w={`100%`}
                                                                            h={`100%`}
                                                                        >
                                                                        </ActionIcon>
                                                                    </Box>
                                                                    <Box
                                                                        h={46}
                                                                        w={46}
                                                                        p={5}
                                                                        style={{
                                                                            border: `1px solid ${activeLayout?.customize_styles?.box_decoration?.shadow_blur_radius == 10 ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                            borderRadius: 4
                                                                        }}>
                                                                        <ActionIcon
                                                                            onClick={() => {
                                                                                setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_styles: {
                                                                                        ...activeLayout.customize_styles,
                                                                                        box_decoration: {
                                                                                            ...activeLayout.customize_styles.box_decoration,
                                                                                            shadow_offset_x: "0",
                                                                                            shadow_offset_y: "0",
                                                                                            shadow_blur_radius: "10",
                                                                                        }
                                                                                    }
                                                                                })
                                                                            }}
                                                                            style={{boxShadow: 'var(--mantine-color-gray-4) 0px 4px 16px 0px'}}
                                                                            variant="white" radius={2} aria-label="Icon"
                                                                            w={`100%`}
                                                                            h={`100%`}
                                                                        >
                                                                        </ActionIcon>
                                                                    </Box>
                                                                    <Box
                                                                        h={46}
                                                                        w={46}
                                                                        p={5}
                                                                        style={{
                                                                            border: `1px solid ${activeLayout?.customize_styles?.box_decoration?.shadow_blur_radius == 15 ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                            borderRadius: 4
                                                                        }}>
                                                                        <ActionIcon
                                                                            onClick={() => {
                                                                                setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_styles: {
                                                                                        ...activeLayout.customize_styles,
                                                                                        box_decoration: {
                                                                                            ...activeLayout.customize_styles.box_decoration,
                                                                                            shadow_offset_x: "0",
                                                                                            shadow_offset_y: "0",
                                                                                            shadow_blur_radius: "15"
                                                                                        }
                                                                                    }
                                                                                })
                                                                            }}
                                                                            style={{boxShadow: 'var(--mantine-color-gray-4) 0px 4px 24px 0px'}}
                                                                            variant="white" radius={2} aria-label="Icon"
                                                                            w={`100%`}
                                                                            h={`100%`}
                                                                        >
                                                                        </ActionIcon>
                                                                    </Box>
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.box_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                box_decoration: {
                                                                                    ...activeLayout.customize_styles.box_decoration,
                                                                                    background_color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.image_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Image`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Image</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Radius</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    image_decoration: {
                                                                                        ...activeLayout.customize_styles.image_decoration,
                                                                                        radius: "0"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.image_decoration?.radius == 0 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={0}
                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    image_decoration: {
                                                                                        ...activeLayout.customize_styles.image_decoration,
                                                                                        radius: "10"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.image_decoration?.radius == 10 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={4}

                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    image_decoration: {
                                                                                        ...activeLayout.customize_styles.image_decoration,
                                                                                        radius: "20"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.image_decoration?.radius == 20 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={8}

                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    image_decoration: {
                                                                                        ...activeLayout.customize_styles.image_decoration,
                                                                                        radius: "30"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.image_decoration?.radius == 30 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={12}
                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    image_decoration: {
                                                                                        ...activeLayout.customize_styles.image_decoration,
                                                                                        radius: "40"
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.image_decoration?.radius == 40 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color={`gray.4`}
                                                                        p={4}
                                                                        w={56}
                                                                        h={27}
                                                                        radius={16}
                                                                    >
                                                                        <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                    </Button>
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Text`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Text</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_x: "0",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_x == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={35}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>0</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_x: "4",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_x == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={41}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>4</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_x: "8",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_x == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={41}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>8</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_x: "16",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_x == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={56}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}

                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12} px={2}>16</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>


                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_x: "24",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_x == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={72}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}

                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12} px={10}>24</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_y: "0",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_y == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={40}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>0</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_y: "4",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_y == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={50}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>4</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_y: "8",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_y == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={50}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>8</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_y: "16",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_y == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={58}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={5}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>16</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>


                                                                        </Flex>
                                                                    </Button>


                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        margin_y: "24",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.margin_y == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={74}
                                                                        w={31}

                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={12}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>24</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_x: "0",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_x == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={35}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>0</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_x: "4",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_x == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={41}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>4</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_x: "8",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_x == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={41}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}
                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12}>8</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_x: "16",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_x == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={56}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}

                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12} px={2}>16</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_x: "24",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_x == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        w={72}
                                                                        h={36}
                                                                        radius={4}
                                                                        p={0}

                                                                    >
                                                                        <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                        <Text fz={12} px={10}>24</Text> <IconSpace
                                                                        style={{transform: "rotate(90deg)"}} size={12}/>

                                                                    </Button>
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_y: "0",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_y == 0 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={40}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>0</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_y: "4",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_y == 4 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={50}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>4</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_y: "8",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_y == 8 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={50}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={0}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>8</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_y: "16",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_y == 16 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={58}
                                                                        w={31}
                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={5}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>16</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>


                                                                        </Flex>
                                                                    </Button>

                                                                    <Button
                                                                        onClick={() => {
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_styles: {
                                                                                    ...activeLayout.customize_styles,
                                                                                    text_decoration: {
                                                                                        ...activeLayout.customize_styles.text_decoration,
                                                                                        padding_y: "24",
                                                                                    }
                                                                                }
                                                                            })
                                                                        }}
                                                                        style={activeLayout?.customize_styles?.text_decoration?.padding_y == 24 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                        type="button"
                                                                        variant="outline"
                                                                        color="var(--mantine-color-dark-9)"
                                                                        radius={4}
                                                                        p={0}
                                                                        h={74}
                                                                        w={31}

                                                                    >
                                                                        <Flex
                                                                            direction="column"
                                                                            gap={12}
                                                                        >
                                                                            <IconSpace size={12}/> <Text fz={12}>24</Text> <IconSpace
                                                                            style={{transform: "rotate(180deg)"}} size={12}/>

                                                                        </Flex>
                                                                    </Button>
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                text_decoration: {
                                                                                    ...activeLayout.customize_styles.text_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.product_brand_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Brand`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Brand</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_brand_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_brand_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_brand_text_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_brand_text_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_brand_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_brand_text_decoration,
                                                                                    background_color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.product_label_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Label`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Label</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_label_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_label_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_label_text_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_label_text_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_label_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_label_text_decoration,
                                                                                    background_color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.product_price_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Price`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Price</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_price_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_price_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_price_text_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.product_rating_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Rating`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Rating</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)' }} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_rating_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_rating_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_rating_text_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_rating_text_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_rating_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_rating_text_decoration,
                                                                                    background_color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.product_category_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Category`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Category</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_category_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_category_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_category_text_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.product_discount_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Discount`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Discount</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_discount_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_discount_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_discount_text_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.product_discount_text_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                product_discount_text_decoration: {
                                                                                    ...activeLayout.customize_styles.product_discount_text_decoration,
                                                                                    background_color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.name_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Name`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Name</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.name_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                name_text_decoration: {
                                                                                    ...activeLayout.customize_styles.name_text_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { activeLayout?.customize_styles?.icon_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={`Icon`}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>Icon</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>


                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: activeLayout?.customize_styles?.icon_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => {
                                                                        setActiveLayout({
                                                                            ...activeLayout,
                                                                            customize_styles: {
                                                                                ...activeLayout.customize_styles,
                                                                                icon_decoration: {
                                                                                    ...activeLayout.customize_styles.icon_decoration,
                                                                                    color: value
                                                                                }
                                                                            },
                                                                        })
                                                                    }}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}
                                        </Accordion>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                        </Accordion>
                    </Tabs.Panel>
                    <Tabs.Panel value="options">
                        <Stack gap={`xs`} mt={10}>
                            <TextInput
                                label="Label"
                                placeholder=""
                                w={`99%`}
                                value={activeLayout.customize_properties.label || ''}
                                onChange={(event) => setActiveLayout({
                                    ...activeLayout,
                                    customize_properties: {
                                        ...activeLayout.customize_properties,
                                        label: event.currentTarget.value
                                    }
                                })}

                            />

                            {
                                "Woo_BannerCategory" === layout?.properties?.class_type && (
                                    <Stack gap={`xs`} mt={10}>
                                        <Box component="form" onSubmit={form.onSubmit(addBanner)}>
                                            <TextInput
                                                label="Add Banner Name"
                                                placeholder="Add Banner Name"
                                                w={`99%`}
                                                {...form.getInputProps('name')}

                                            />

                                            <Flex
                                                gap={0}
                                                direction="column"
                                                wrap="nowrap"
                                            >
                                                <Text>Upload Image</Text>
                                                <Dropzone
                                                    onDrop={(file) => {
                                                        setBannerImage(file)
                                                        // setLogo(file)
                                                        form.setValues({image: file[0]})
                                                    }}
                                                    onReject={(file) => {
                                                        notifications.show({
                                                            title: 'Invalid file',
                                                            // message: 'File size should not exceed 5mb',
                                                            color: 'var(--mantine-color-red-9)',
                                                            autoClose: 5000,
                                                            icon: <IconAlertTriangle style={{width: rem(18), height: rem(18)}}/>
                                                        })
                                                    }}
                                                    maxSize={5 * 1024 ** 2}
                                                    accept={[MIME_TYPES.png]}
                                                    style={{border: '2px dashed var(--mantine-color-orange-4)'}}
                                                >
                                                    <Stack gap="sm" align="center" mih={80} style={{pointerEvents: 'none'}}>
                                                        <Dropzone.Accept>
                                                            <IconUpload
                                                                style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)'}}
                                                                stroke={1.5}
                                                            />
                                                        </Dropzone.Accept>
                                                        <Dropzone.Reject>
                                                            <IconX
                                                                style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)'}}
                                                                stroke={1.5}
                                                            />
                                                        </Dropzone.Reject>
                                                        <Dropzone.Idle>
                                                            {bannerImagePreview.length > 0 && bannerImagePreview}
                                                            {/*{bannerImage.length === 0 && settingsData.app_splash_screen && <Image fit="cover" w={`90%`} h={`100%`} src={settingsData.app_splash_screen} />}*/}
                                                            {bannerImagePreview.length === 0 && <IconCloudUpload style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)'}} stroke={1.5} />}

                                                        </Dropzone.Idle>

                                                        <Text size="xl" inline>Drag Image or <span
                                                            style={{color: 'var(--mantine-color-orange-4)'}}>Upload</span></Text>
                                                    </Stack>
                                                </Dropzone>
                                            </Flex>

                                            <Select
                                                label="Dropdown (Category or Tag)"
                                                placeholder="Category"
                                                data={categories?.map(category => ({ value: category.slug, label: category.name }))}
                                                rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                                rightSectionPointerEvents="none"
                                                onChange={value => form.setValues({category: value})}
                                                nothingFoundMessage="Nothing found..."
                                                maxDropdownHeight={200}
                                                w={`99%`}
                                                styles={{
                                                    input: {
                                                        backgroundColor: 'transparent'
                                                    }
                                                }}


                                            />

                                            <Flex
                                                justify="space-between"
                                                align="center"
                                                gap="md"
                                            >
                                                <TextInput
                                                    label="Button Text"
                                                    placeholder="Button text"
                                                    w={`100%`}
                                                    {...form.getInputProps('button_text')}

                                                />

                                                <Group gap={0}>
                                                    <Text fz="var(--mantine-font-size-sm)">Button Color</Text>
                                                    <ColorInput
                                                        styles={{
                                                            wrapper: {
                                                                padding: 5,
                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                borderRadius: "var(--mantine-radius-sm)",
                                                                // width: 50,
                                                            },
                                                            input: {
                                                                backgroundColor: form.values.button_color,
                                                                height: 36,
                                                                width: 36,
                                                                color: "transparent",
                                                            },
                                                        }}
                                                        variant="unstyled"
                                                        disallowInput
                                                        leftSection={` `}
                                                        leftSectionWidth={0}
                                                        rightSection={` `}
                                                        rightSectionWidth={0}
                                                        defaultValue=""
                                                        value=""
                                                        onChangeEnd={(value) => form.setValues({button_color: value})}
                                                        {...form.getInputProps('button_color')}

                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                    />
                                                </Group>
                                            </Flex>
                                            <Group justify="flex-end" gap="xs" mt="xs">
                                                <Button type="submit" w={`25%`}>Add</Button>
                                            </Group>
                                        </Box>

                                        <Divider size="sm"/>

                                        {activeLayout?.customize_properties?.items?.map((item, index) => (
                                            <Box key={index} p={5} mt={5} style={{ border: "1px solid var(--mantine-color-gray-4)"}}>
                                                <Stack>
                                                    <TextInput
                                                        label="Add Banner Name"
                                                        placeholder="Add Banner Name"
                                                        w={`99%`}
                                                        defaultValue={item.name}
                                                        onChange={(event) => {
                                                            activeLayout.customize_properties.items[index].name = event.currentTarget.value
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_properties: {
                                                                    ...activeLayout.customize_properties,
                                                                    items: activeLayout.customize_properties.items
                                                                }
                                                            })
                                                        }}

                                                    />

                                                    <Image src={item?.image} fit="contain"/>
                                                    <Select
                                                        label="Dropdown (Category or Tag)"
                                                        placeholder="Category"
                                                        data={categories?.map(category => ({ value: category.slug, label: category.name }))}
                                                        value={item.category}
                                                        onChange={(value) => {
                                                            activeLayout.customize_properties.items[index].category = value
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_properties: {
                                                                    ...activeLayout.customize_properties,
                                                                    items: activeLayout.customize_properties.items
                                                                }
                                                            })
                                                        }}
                                                        rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                                        allowDeselect={false}
                                                        nothingFoundMessage="Nothing found..."
                                                        maxDropdownHeight={200}
                                                        w={`99%`}

                                                        styles={{
                                                            input: {
                                                                backgroundColor: 'transparent',
                                                            }
                                                        }}

                                                    />
                                                    <Flex
                                                        justify="space-between"
                                                        align="center"
                                                        gap="md"
                                                    >
                                                        <ActionIcon variant="subtle" onClick={() => removeBannerSlide({component_id: activeLayout.id, slide_position: index})}>
                                                            <IconTrash/>
                                                        </ActionIcon>
                                                        <Button onClick={() => updateBannerSlider({component_id: activeLayout.id, slide_position: index, data: item})}>Update</Button>
                                                    </Flex>
                                                </Stack>
                                            </Box>
                                        ))}
                                    </Stack>
                                )
                            }

                            {
                                "Woo_Category" === layout?.properties?.class_type && (

                                    <Stack mt="xs" gap={0}>
                                        <Flex justify="space-between" align="center">
                                            <Text fz="sm" fw={500}>Categories</Text>
                                            <Switch
                                                onChange={(event) => {
                                                    if(event.currentTarget.checked) {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_properties: {
                                                                ...activeLayout.customize_properties,
                                                                category_slugs: categories?.map(category => category.slug),
                                                                all_category: true
                                                            }

                                                        })
                                                    } else {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_properties: {
                                                                ...activeLayout.customize_properties,
                                                                category_slugs: [],
                                                                all_category: false
                                                            }
                                                        })
                                                    }
                                                }}
                                                checked={activeLayout.customize_properties?.all_category}
                                                size="xs"
                                                label={<Text lineClamp={1}>All</Text>}
                                                radius="sm"
                                                styles={{
                                                    track: {
                                                        marginTop: '4px'
                                                    }
                                                }}
                                            />
                                        </Flex>
                                        <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
                                            {
                                                categories?.map((category, index) => (
                                                    <Switch
                                                        onChange={(event) => {
                                                            if(event.currentTarget.checked) {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_properties: {
                                                                        ...activeLayout.customize_properties,
                                                                        category_slugs: [...activeLayout.customize_properties.category_slugs, category.slug]
                                                                    }

                                                                });

                                                                categories?.length > 0 && categories.length === activeLayout?.customize_properties?.category_slugs?.length && setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_properties: {
                                                                        ...activeLayout.customize_properties,
                                                                        all_category: true
                                                                    }
        
                                                                })
                                                            } else {
                                                                let category_slugs = activeLayout.customize_properties.category_slugs
                                                                let index = category_slugs?.indexOf(category.slug)
                                                                if (index > -1) {
                                                                    category_slugs.splice(index, 1)
                                                                }
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_properties: {
                                                                        ...activeLayout.customize_properties,
                                                                        category_slugs: category_slugs,
                                                                        all_category: false
                                                                    }
                                                                })
                                                            }

                                                        }}
                                                        checked={activeLayout.customize_properties?.category_slugs?.indexOf(category.slug) > -1}
                                                        size="xs"
                                                        label={<Text lineClamp={1}>{category?.name}</Text>}
                                                        radius="sm"
                                                        styles={{
                                                            track: {
                                                                marginTop: '4px'
                                                            }
                                                        }}
                                                    />
                                                ))
                                            }

                                        </SimpleGrid>
                                    </Stack>

                                )
                            }

                            {
                                "Woo_CategoryProduct" === layout?.properties?.class_type && (
                                    <Stack mt="xs" gap="xs">
                                        <Select
                                            label="Categories or Tags"
                                            placeholder="Select"
                                            data={['Categories', 'Tags']}
                                            defaultValue={selectGroup}
                                            onChange={(value) => setSelectGroup(value)}
                                            rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                            nothingFoundMessage="Nothing found..."
                                            maxDropdownHeight={200}
                                            w={`99%`}
                                            styles={{
                                                input: {
                                                    backgroundColor: 'transparent'
                                                }
                                            }}
                                        />

                                        {
                                            'Categories' === selectGroup &&
                                            <Accordion chevronPosition="right" variant="contained">
                                                {
                                                    categories?.map((item, index) => (
                                                        <Accordion.Item key={index} mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={item?.name}>
                                                            <Flex align="center" justify="space-between" ml="xs">
                                                                <Switch
                                                                    onChange={(event) => {
                                                                        if(event.currentTarget.checked) {
                                                                            if (activeLayout.customize_properties.tags) {
                                                                                delete activeLayout.customize_properties.tags;
                                                                                setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_properties: {
                                                                                        ...activeLayout.customize_properties,
                                                                                        categories: [{label: item.name, slug: item.slug, limit: 1, order: 'ASC' }]

                                                                                    }

                                                                                })
                                                                            } else {
                                                                                setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_properties: {
                                                                                        ...activeLayout.customize_properties,
                                                                                        categories: [...activeLayout.customize_properties.categories, {label: item.name, slug: item.slug, limit: 1, order: 'ASC' }]

                                                                                    }

                                                                                })
                                                                            }

                                                                        } else {
                                                                            let categories = activeLayout.customize_properties.categories
                                                                            let index = categories?.findIndex(category => category.slug === item.slug)
                                                                            if (index > -1) {
                                                                                categories.splice(index, 1)
                                                                            }
                                                                            setActiveLayout({
                                                                                ...activeLayout,
                                                                                customize_properties: {
                                                                                    ...activeLayout.customize_properties,
                                                                                    categories: categories
                                                                                }
                                                                            })
                                                                        }

                                                                    }}
                                                                    checked={ activeLayout.customize_properties?.categories?.some(category => category.slug === item.slug) }
                                                                    size="xs"
                                                                    radius="sm"
                                                                />
                                                                <Accordion.Control>
                                                                    <Text lineClamp={1}>{item?.name}</Text>
                                                                </Accordion.Control>
                                                            </Flex>

                                                            <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                                <Grid gutter="xs">
                                                                    <Grid.Col span={6}>
                                                                        <Stack>
                                                                            <NumberInput
                                                                                disabled={!activeLayout.customize_properties?.categories?.some(category => category.slug === item.slug)}
                                                                                label="Limit"
                                                                                onChange={(value) => setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_properties: {
                                                                                        ...activeLayout.customize_properties,
                                                                                        categories: activeLayout.customize_properties.categories?.map(category => {
                                                                                            if(category.slug === item.slug) {
                                                                                                category.limit = value
                                                                                            }
                                                                                            return category
                                                                                        })
                                                                                    }
                                                                                })}
                                                                                min={1}
                                                                                max={item?.item_count}
                                                                                value={ activeLayout?.customize_properties?.categories?.find(category => category.slug === item.slug)?.limit }
                                                                            />
                                                                        </Stack>
                                                                    </Grid.Col>
                                                                    <Grid.Col span={6}>
                                                                        <Stack>
                                                                            <Select
                                                                                disabled={!activeLayout.customize_properties?.categories?.some(category => category.slug === item.slug)}
                                                                                label="Sort"
                                                                                data={[
                                                                                    { label: 'Latest', value: 'DESC' },
                                                                                    { label: 'Oldest', value: 'ASC' }
                                                                                ]}
                                                                                onChange={(value) => setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_properties: {
                                                                                        ...activeLayout.customize_properties,
                                                                                        categories: activeLayout.customize_properties.categories?.map(category => {
                                                                                            if(category.slug === item.slug) {
                                                                                                category.order = value
                                                                                            }
                                                                                            return category
                                                                                        })
                                                                                    }
                                                                                })}
                                                                                value={ activeLayout?.customize_properties?.categories?.find(category => category.slug === item.slug)?.order }
                                                                                rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                                                                nothingFoundMessage="Nothing found..."
                                                                                maxDropdownHeight={200}
                                                                                styles={{
                                                                                    input: {
                                                                                        backgroundColor: 'transparent'
                                                                                    }
                                                                                }}
                                                                            />
                                                                        </Stack>
                                                                    </Grid.Col>
                                                                </Grid>
                                                            </Accordion.Panel>
                                                        </Accordion.Item>

                                                    ))
                                                }

                                            </Accordion>
                                        }
                                        {
                                            'Tags' === selectGroup && (
                                                <Accordion chevronPosition="right" variant="contained">
                                                    {
                                                        tags?.map((item, index) => (
                                                            <Accordion.Item key={index} mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={item?.name}>
                                                                <Flex align="center" justify="space-between" ml="xs">
                                                                    <Switch
                                                                        onChange={(event) => {
                                                                            if(event.currentTarget.checked) {
                                                                                if (activeLayout.customize_properties.categories) {
                                                                                    delete activeLayout.customize_properties.categories;
                                                                                    setActiveLayout({
                                                                                        ...activeLayout,
                                                                                        customize_properties: {
                                                                                            ...activeLayout.customize_properties,
                                                                                            tags: [{label: item.name, slug: item.slug, limit: 1, order: 'ASC' }]

                                                                                        }

                                                                                    })
                                                                                } else {
                                                                                    setActiveLayout({
                                                                                        ...activeLayout,
                                                                                        customize_properties: {
                                                                                            ...activeLayout.customize_properties,
                                                                                            tags: [...activeLayout.customize_properties.tags, {label: item.name, slug: item.slug, limit: 1, order: 'ASC' }]

                                                                                        }

                                                                                    })
                                                                                }

                                                                            } else {
                                                                                let tags = activeLayout.customize_properties.tags
                                                                                let index = tags?.findIndex(tag => tag.slug === item.slug)
                                                                                if (index > -1) {
                                                                                    tags.splice(index, 1)
                                                                                }
                                                                                setActiveLayout({
                                                                                    ...activeLayout,
                                                                                    customize_properties: {
                                                                                        ...activeLayout.customize_properties,
                                                                                        tags: tags
                                                                                    }
                                                                                })
                                                                            }

                                                                        }}
                                                                        checked={ activeLayout.customize_properties?.tags?.some(tag => tag.slug === item.slug)}
                                                                        size="xs"
                                                                        radius="sm"
                                                                    />
                                                                    <Accordion.Control>
                                                                        <Text lineClamp={1}>{item?.name}</Text>
                                                                    </Accordion.Control>
                                                                </Flex>

                                                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                                    <Grid gutter="xs">
                                                                        <Grid.Col span={6}>
                                                                            <Stack>
                                                                                <NumberInput
                                                                                    disabled={!activeLayout.customize_properties?.tags?.some(tag => tag.slug === item.slug)}
                                                                                    label="Limit"
                                                                                    onChange={(value) => setActiveLayout({
                                                                                        ...activeLayout,
                                                                                        customize_properties: {
                                                                                            ...activeLayout.customize_properties,
                                                                                            tags: activeLayout.customize_properties.tags?.map(tag => {
                                                                                                if(tag.slug === item.slug) {
                                                                                                    tag.limit = value
                                                                                                }
                                                                                                return tag
                                                                                            })
                                                                                        }
                                                                                    })}
                                                                                    min={1}
                                                                                    max={item?.item_count}
                                                                                    value={ activeLayout?.customize_properties?.tags?.find(tag => tag.slug === item.slug)?.limit }
                                                                                />
                                                                            </Stack>
                                                                        </Grid.Col>
                                                                        <Grid.Col span={6}>
                                                                            <Stack>
                                                                                <Select
                                                                                    disabled={!activeLayout.customize_properties?.tags?.some(tag => tag.slug === item.slug)}
                                                                                    label="Sort"
                                                                                    data={[
                                                                                        {label: 'Latest', value: 'DESC'},
                                                                                        { label: 'Oldest', value: 'ASC' }
                                                                                    ]}
                                                                                    onChange={(value) => setActiveLayout({
                                                                                        ...activeLayout,
                                                                                        customize_properties: {
                                                                                            ...activeLayout.customize_properties,
                                                                                            tags: activeLayout.customize_properties.tags?.map(tag => {
                                                                                                if(tag.slug === item.slug) {
                                                                                                    tag.order = value
                                                                                                }
                                                                                                return tag
                                                                                            })
                                                                                        }
                                                                                    })}
                                                                                    value={ activeLayout?.customize_properties?.tags?.find(tag => tag.slug === item.slug)?.order }
                                                                                    rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                                                                    nothingFoundMessage="Nothing found..."
                                                                                    maxDropdownHeight={200}
                                                                                    styles={{
                                                                                        input: {
                                                                                            backgroundColor: 'transparent'
                                                                                        }
                                                                                    }}
                                                                                />
                                                                            </Stack>
                                                                        </Grid.Col>
                                                                    </Grid>
                                                                </Accordion.Panel>
                                                            </Accordion.Item>

                                                        ))
                                                    }

                                                </Accordion>
                                            )
                                        }
                                    </Stack>
                                )
                            }
                        </Stack>

                    </Tabs.Panel>
                </ScrollArea>
            </Tabs>

            <Flex justify="flex-end" align="center" pr="sm">
                <Button leftSection={<IconServer/>} onClick={() => saveData()} disabled={isSubmit}>Update & Save</Button>
            </Flex>
        </Box>
    )
}

export default ComponentCustomization;