import {
    Accordion, ActionIcon, Affix, Box, Burger, Button, ColorInput, Flex,
    Group, LoadingOverlay, rem, ScrollArea, Skeleton, Stack, Switch, Tabs,
    Text, useMantineTheme
} from "@mantine/core";
import { notifications } from '@mantine/notifications';

import {useEffect, useState} from "@wordpress/element";
import {
    IconAlertTriangle,
    IconCheck, IconPhoto, IconServer, IconSpace, IconSpacingHorizontal,
    IconSpacingVertical, IconUser
} from "@tabler/icons-react";
import axios from "axios";
import Component from "../Component";
import {useViewportSize} from "@mantine/hooks";

const AppbarCustomization = ({layout, setRecallAppbar}) => {
    const {height, width} = useViewportSize();
    const [activeLayout, setActiveLayout] = useState(null);
    const [isSubmitted, setIsSubmitted] = useState(false);
    const theme = useMantineTheme();
    useEffect(() => {
        setActiveLayout(layout);
    }, [layout]);

    const saveData = () => {
        setIsSubmitted(true)

        const notificationId = notifications.show({
            color: theme.primaryColor + '.2',
            loading: true,
            title: 'Saving...',
            autoClose: false,
            withCloseButton: false,
        });
        axios({
            method: 'put',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/global-layout`,
            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: 'Data saved!',
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,

                });
                setIsSubmitted(false);
                setRecallAppbar(prevState => !prevState);
                setActiveLayout(res.data);


            })
            .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,

                });
                setIsSubmitted(false);
            });
    }

    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`}>
                    <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={25} chevronPosition="right" variant="contained" mb={`sm`} defaultValue="General Properties">
                            <Accordion.Item mb={10} style={{borderTopLeftRadius: 0, borderTopRightRadius: 0}} value={`General Properties`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>{`General Properties`}</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Box>
                                            <Text fz={14}>Background Color</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                gap={`md`}
                                            >
                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    background_color: value
                                                                }
                                                            },
                                                        })
                                                    }}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Float</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                gap={`md`}
                                            >
                                                <Switch
                                                    checked={activeLayout?.customize_styles?.general_properties?.float}
                                                    size="xs"
                                                    label=""
                                                    radius="sm"
                                                    onChange={(event) => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    float: event.currentTarget.checked
                                                                }
                                                            }
                                                        })
                                                    }}
                                                />

                                            </Flex>
                                        </Box>
                                        <Box display={activeLayout?.customize_styles?.general_properties?.float ? 'block' : 'none'}>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                        <Text fz={14}>Margin Horizontal</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_x: "0"
                                                                    }
                                                                },
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_x: "4",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_x: "8",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_x: "16",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_x: "24",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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>
                                        </Box>
                                        <Box display={activeLayout?.customize_styles?.general_properties?.float ? 'block' : 'none'}>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                        <Text fz={14}>Margin Top</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_y: "0",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_y: "4",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_y: "8",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_y: "16",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        margin_y: "24",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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>
                                            <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_properties?.shadow == 0 ? theme.primaryColor : "var(--mantine-color-gray-2)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        shadow: "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_properties?.shadow == 1 ? theme.primaryColor : "var(--mantine-color-gray-2)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        shadow: "1"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        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_properties?.shadow == 2 ? theme.primaryColor : "var(--mantine-color-gray-2)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        shadow: "2"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        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_properties?.shadow == 3 ? theme.primaryColor : "var(--mantine-color-gray-2)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        shadow: "3"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        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>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Shape Type</Text>
                                            <Flex
                                                align="center"
                                                justify="center"
                                                color="gray.4"
                                                gap={10}
                                                wrap={`wrap`}
                                            >
                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    shape_radius: "0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.shape_radius == 0 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                    type="button"
                                                    variant="outline"
                                                    color={`gray.4`}
                                                    px={5}
                                                    py={10}
                                                    radius={0}
                                                >
                                                    <Flex
                                                        align="center"
                                                        justify="center"
                                                        gap={2}
                                                    >
                                                        <Burger size={14} color={`gray.4`}/>
                                                        <Skeleton height={16} width={47} radius={2} animate={false}/>
                                                        <Skeleton height={14} circle animate={false}/>
                                                    </Flex>
                                                </Button>
                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    shape_radius: "10"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.shape_radius == 10 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                    type="button"
                                                    variant="outline"
                                                    color={`gray.4`}
                                                    px={5}
                                                    py={10}
                                                    radius={4}

                                                >
                                                    <Flex
                                                        align="center"
                                                        justify="center"
                                                        gap={2}
                                                    >
                                                        <Burger size={14} color={`gray.4`}/>
                                                        <Skeleton height={16} width={47} radius={2} animate={false}/>
                                                        <Skeleton height={14} circle animate={false}/>
                                                    </Flex>
                                                </Button>
                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    shape_radius: "20"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.shape_radius == 20 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                    type="button"
                                                    variant="outline"
                                                    color={`gray.4`}
                                                    px={5}
                                                    py={10}
                                                    radius={8}

                                                >
                                                    <Flex
                                                        align="center"
                                                        justify="center"
                                                        gap={2}
                                                    >
                                                        <Burger size={14} color={`gray.4`}/>
                                                        <Skeleton height={16} width={47} radius={2} animate={false}/>
                                                        <Skeleton height={14} circle animate={false}/>
                                                    </Flex>
                                                </Button>
                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    shape_radius: "30"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.shape_radius == 30 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                    type="button"
                                                    variant="outline"
                                                    color={`gray.4`}
                                                    px={5}
                                                    py={10}
                                                    radius={12}
                                                >
                                                    <Flex
                                                        align="center"
                                                        justify="center"
                                                        gap={2}
                                                    >
                                                        <Burger size={14} color={`gray.4`}/>
                                                        <Skeleton height={16} width={47} radius={2} animate={false}/>
                                                        <Skeleton height={14} circle animate={false}/>
                                                    </Flex>
                                                </Button>
                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    shape_radius: "40"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.shape_radius == 40 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                    type="button"
                                                    variant="outline"
                                                    color={`gray.4`}
                                                    px={4}
                                                    py={10}
                                                    radius={16}
                                                >
                                                    <Flex
                                                        align="center"
                                                        justify="center"
                                                        gap={2}
                                                    >
                                                        <Burger size={14} color={`gray.4`}/>
                                                        <Skeleton height={16} width={47} radius={2} animate={false}/>
                                                        <Skeleton height={14} circle animate={false}/>
                                                    </Flex>
                                                </Button>
                                            </Flex>
                                        </Box>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)'}} value={`Icon Properties`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>{`Icon Properties`}</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Box>
                                            <Text fz={14}>Icon Shape Radius</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?.icon_properties?.shape_radius == 0 ? theme.primaryColor : "var(--mantine-color-gray-4)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        shape_radius: "0"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        variant="filled" radius="xs" aria-label="Icon" color="#475177"
                                                        w={`100%`}
                                                        h={`100%`}
                                                    >
                                                        <IconUser style={{width: '70%', height: '70%'}} stroke={1.5}/>
                                                    </ActionIcon>
                                                </Box>
                                                <Box
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    style={{border: `1px solid ${activeLayout?.customize_styles?.icon_properties?.shape_radius == 50 ? theme.primaryColor : "var(--mantine-color-gray-4)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        shape_radius: "50"
                                                                    }
                                                                }
                                                            })

                                                        }}
                                                        variant="filled" radius="xl" aria-label="Icon" color="#475177"
                                                        w={`100%`}
                                                        h={`100%`}
                                                    >
                                                        <IconUser style={{width: '70%', height: '70%'}} stroke={1.5}/>
                                                    </ActionIcon>
                                                </Box>
                                                <Box
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    style={{border: `1px solid ${activeLayout?.customize_styles?.icon_properties?.shape_radius == 10 ? theme.primaryColor : "var(--mantine-color-gray-4)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        shape_radius: "10"
                                                                    }
                                                                }
                                                            })

                                                        }}
                                                        variant="filled" radius="sm" aria-label="Icon" color="#475177"
                                                        w={`100%`}
                                                        h={`100%`}
                                                    >
                                                        <IconUser style={{width: '70%', height: '70%'}} stroke={1.5}/>
                                                    </ActionIcon>
                                                </Box>
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Icon Background Color</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                gap={`md`}
                                            >
                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: activeLayout?.customize_styles?.icon_properties?.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,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    background_color: value
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Transparent Background</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                gap={`md`}
                                            >
                                                <Switch
                                                    checked={activeLayout?.customize_styles?.icon_properties?.is_transparent_background}
                                                    size="xs"
                                                    label=""
                                                    radius="sm"
                                                    onChange={(event) => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    is_transparent_background: event.currentTarget.checked
                                                                }
                                                            }
                                                        })
                                                    }}
                                                />

                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Icon Color</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                gap={`md`}
                                            >
                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: activeLayout?.customize_styles?.icon_properties?.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_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    color: value
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Icon Size</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    size: "32.0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.icon_properties?.size == "32.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <Text c="#475177">32</Text>
                                                </ActionIcon>
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    size: "24.0"
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.icon_properties?.size == "24.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <Text c="#475177">24</Text>
                                                </ActionIcon>
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    size: "16.0"
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.icon_properties?.size == "16.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <Text c="#475177">16</Text>
                                                </ActionIcon>
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Icon Weight</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    weight: "4.0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.icon_properties?.weight == "4.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <IconUser style={{width: '70%', height: '70%'}} color="#475177"
                                                              stroke={3.5}/>
                                                </ActionIcon>
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    weight: "1.0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.icon_properties?.weight == "1.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <IconUser style={{width: '70%', height: '70%'}} color="#475177" stroke={1.5}/>
                                                </ActionIcon>
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    weight: "2.0"
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.icon_properties?.weight == "2.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <IconUser style={{width: '70%', height: '70%'}} color="#475177"
                                                              stroke={2.5}/>
                                                </ActionIcon>
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                        <Text fz={12}>Padding Horizontal</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_x: "0"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.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={41}
                                                        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,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_x: "8"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.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,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_x: "16"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.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,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_x: "20"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.padding_x == 20 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={64}
                                                        h={36}
                                                        radius={4}
                                                        p={0}

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

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_x: "24"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.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>
                                        </Box>
                                        <Box>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                        <Text fz={12}>Padding Vertical</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_y: "0"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.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={50}
                                                        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,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_y: "8"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.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,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_y: "16"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.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,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_y: "20"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.padding_y == 20 ? {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={66}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={10}
                                                        >
                                                            <IconSpace size={12} /> <Text fz={12}>20</Text> <IconSpace style={{transform: "rotate(180deg)"}} size={12} />


                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    icon_properties: {
                                                                        ...activeLayout.customize_styles.icon_properties,
                                                                        padding_y: "24"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.icon_properties?.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>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)'}} value={`Image Properties`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>{`Image Properties`}</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Box>
                                            <Text fz={14}>Image Size</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                image_properties: {
                                                                    ...activeLayout.customize_styles.image_properties,
                                                                    width: "32.0",
                                                                    height: "32.0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.image_properties?.width == "32.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <Text c="#475177">32</Text>
                                                </ActionIcon>
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                image_properties: {
                                                                    ...activeLayout.customize_styles.image_properties,
                                                                    width: "24.0",
                                                                    height: "24.0"
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.image_properties?.width == "24.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <Text c="#475177">24</Text>
                                                </ActionIcon>
                                                <ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                image_properties: {
                                                                    ...activeLayout.customize_styles.image_properties,
                                                                    width: "16.0",
                                                                    height: "16.0"
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={activeLayout?.customize_styles?.image_properties?.width == "16.0" ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                >
                                                    <Text c="#475177">16</Text>
                                                </ActionIcon>
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Image Shape Radius</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?.image_properties?.shape_radius == "0.0" ? theme.primaryColor : "var(--mantine-color-gray-4)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    image_properties: {
                                                                        ...activeLayout.customize_styles.image_properties,
                                                                        shape_radius: "0.0"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        variant="filled" radius="xs" aria-label="Icon" color="#475177"
                                                        w={`100%`}
                                                        h={`100%`}
                                                    >
                                                        <IconPhoto style={{width: '70%', height: '70%'}} stroke={1.5}/>
                                                    </ActionIcon>
                                                </Box>
                                                <Box
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    style={{border: `1px solid ${activeLayout?.customize_styles?.image_properties?.shape_radius == "50.0" ? theme.primaryColor : "var(--mantine-color-gray-4)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    image_properties: {
                                                                        ...activeLayout.customize_styles.image_properties,
                                                                        shape_radius: "50.0"
                                                                    }
                                                                }
                                                            })

                                                        }}
                                                        variant="filled" radius="xl" aria-label="Icon" color="#475177"
                                                        w={`100%`}
                                                        h={`100%`}
                                                    >
                                                        <IconPhoto style={{width: '70%', height: '70%'}} stroke={1.5}/>
                                                    </ActionIcon>
                                                </Box>
                                                <Box
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    style={{border: `1px solid ${activeLayout?.customize_styles?.image_properties?.shape_radius == "10.0" ? theme.primaryColor : "var(--mantine-color-gray-4)"}`, borderRadius: 4}}>
                                                    <ActionIcon
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    image_properties: {
                                                                        ...activeLayout.customize_styles.image_properties,
                                                                        shape_radius: "10.0"
                                                                    }
                                                                }
                                                            })

                                                        }}
                                                        variant="filled" radius="sm" aria-label="Icon" color="#475177"
                                                        w={`100%`}
                                                        h={`100%`}
                                                    >
                                                        <IconPhoto style={{width: '70%', height: '70%'}} stroke={1.5}/>
                                                    </ActionIcon>
                                                </Box>
                                            </Flex>
                                        </Box>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)'}} value={`Border`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>{`Border`}</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Box>
                                            <Text fz={14}>Width</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={10}
                                            >
                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    border_width: "0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    border_width: "1"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.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_properties?.border_color}
                                                        h={1} w={48}></Box>
                                                </Button>

                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    border_width: "2"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.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_properties?.border_color}
                                                        h={2} w={48}></Box>
                                                </Button>

                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    border_width: "3"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.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_properties?.border_color}
                                                        h={3} w={48}></Box>
                                                </Button>

                                                <Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    border_width: "4"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={activeLayout?.customize_styles?.general_properties?.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_properties?.border_color}
                                                        h={4} w={48}></Box>
                                                </Button>
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Color Opacity</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                gap={`md`}
                                            >
                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    border_color: value
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                        </Box>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                            <Accordion.Item mb={10} style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderTop: '1px solid var(--mantine-color-gray-2)' }} value={`Padding`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>{`Padding`}</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Box>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                        <Text fz={12}>Horizontal</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        padding_x: "8"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        padding_x: "16"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        padding_x: "20"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.padding_x == 20 ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                        type="button"
                                                        variant="outline"
                                                        color="var(--mantine-color-dark-9)"
                                                        w={64}
                                                        h={36}
                                                        radius={4}
                                                        p={0}

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

                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        padding_x: "24"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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>
                                        </Box>
                                        <Box h={1} w={`100%`} bg={`gray.2`}></Box>
                                        <Box>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                        <Text fz={12}>Vertical</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        padding_y: "8"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        padding_y: "16"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        padding_y: "20"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.padding_y == 20 ? {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={66}
                                                        w={31}
                                                    >
                                                        <Flex
                                                            direction="column"
                                                            gap={10}
                                                        >
                                                            <IconSpace size={12} /> <Text fz={12}>20</Text> <IconSpace style={{transform: "rotate(180deg)"}} size={12} />


                                                        </Flex>
                                                    </Button>

                                                    <Button
                                                        onClick={() => {
                                                            setActiveLayout({
                                                                ...activeLayout,
                                                                customize_styles: {
                                                                    ...activeLayout.customize_styles,
                                                                    general_properties: {
                                                                        ...activeLayout.customize_styles.general_properties,
                                                                        padding_y: "24"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={activeLayout?.customize_styles?.general_properties?.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>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                        </Accordion>
                    </Tabs.Panel>
                    <Tabs.Panel value="options">
                        <Stack gap={`xs`} mt={10}>
                            {
                                activeLayout?.components?.map((component, index) => <Component key={component.id} index={index} component={component} activeLayout={activeLayout} setActiveLayout={setActiveLayout}/>)
                            }
                        </Stack>

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

    );
}

export default AppbarCustomization;