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

import {useEffect, useState} from "@wordpress/element";
import {
    IconCheck,
    IconPhoto, IconServer,
    IconSpace,
    IconSpacingHorizontal,
    IconSpacingVertical,
    IconUser
} from "@tabler/icons-react";
import {notifications} from "@mantine/notifications";
import Component from "./Component";
import {useDisclosure, useViewportSize} from "@mantine/hooks";
import {useDispatch, useSelector} from "react-redux";
import {setIsDirty, updateCopySelectedComponentStyles} from "../../../features/selectedComponent/selectedComponentSlice";
import {saveNavbar} from "../../../features/globalComponents/globalComponentsThunks";
import {updateActiveNavbar} from "../../../features/globalComponents/activeNavbarSlice";

const NavbarCustomization = () => {
    const theme = useMantineTheme();
    const { height, width } = useViewportSize();
    const [activeLayout, setActiveLayout] = useState(null);


    const dispatch = useDispatch();
    const {copySelectedComponent} = useSelector((state) => state.selectedComponent);

    const handleStyleChange = (styleGroup, key, value) => dispatch(updateCopySelectedComponentStyles({styleGroup, key, value}));


    useEffect(() => {
        dispatch(updateActiveNavbar(copySelectedComponent))
    }, [copySelectedComponent, dispatch]);


    return(
        <Box pt="sm" pos="relative">
            <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 - 190} 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: copySelectedComponent?.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
                                                                }
                                                            },
                                                        })
                                                    }}*/
                                                    onChangeEnd={(value) => handleStyleChange('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={copySelectedComponent?.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
                                                                }
                                                            }
                                                        })
                                                    }}*/
                                                    onChange={(event) => handleStyleChange('general_properties', 'float', event.currentTarget.checked)}

                                                />

                                            </Flex>
                                        </Box>
                                        <Box display={copySelectedComponent?.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}
                                                >
                                                    {
                                                        [0, 4, 8, 16, 24].map((item,index) => (

                                                            <Button
                                                                /*onClick={() => {
                                                                    setActiveLayout({
                                                                        ...activeLayout,
                                                                        customize_styles: {
                                                                            ...activeLayout.customize_styles,
                                                                            general_properties: {
                                                                                ...activeLayout.customize_styles.general_properties,
                                                                                margin_x: "0"
                                                                            }
                                                                        },
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_properties', 'margin_x', item.toString())}

                                                                style={copySelectedComponent?.customize_styles?.general_properties?.margin_x == item ? {border: "var(--mantine-color-orange-6) 1px solid"} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                type="button"
                                                                variant="outline"
                                                                color="var(--mantine-color-dark-9)"
                                                                w={35 + item}
                                                                h={36}
                                                                radius={4}
                                                                p={0}
                                                            >
                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                <Text fz={12} px={index}>{item}</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: "0"
                                                                    }
                                                                },
                                                            })
                                                        }}
                                                        style={copySelectedComponent?.customize_styles?.general_properties?.margin_x == 0 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.customize_styles?.general_properties?.margin_x == 4 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.customize_styles?.general_properties?.margin_x == 8 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.customize_styles?.general_properties?.margin_x == 16 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.customize_styles?.general_properties?.margin_x == 24 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.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 Bottom</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >

                                                    {
                                                        [0, 4, 8, 16, 24].map((item,index) => (

                                                            <Button
                                                                /*onClick={() => {
                                                                    setActiveLayout({
                                                                        ...activeLayout,
                                                                        customize_styles: {
                                                                            ...activeLayout.customize_styles,
                                                                            general_properties: {
                                                                                ...activeLayout.customize_styles.general_properties,
                                                                                margin_y: "0",
                                                                            }
                                                                        }
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_properties', 'margin_y', item.toString())}

                                                                style={copySelectedComponent?.customize_styles?.general_properties?.margin_y == item ? {border: "var(--mantine-color-orange-6) 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 + item}
                                                                w={31}
                                                            >
                                                                <Flex direction="column" gap={0}>
                                                                    <IconSpace size={12}/>
                                                                    <Text fz={12} py={index}>{item}</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: "0",
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={copySelectedComponent?.customize_styles?.general_properties?.margin_y == 0 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.customize_styles?.general_properties?.margin_y == 4 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.customize_styles?.general_properties?.margin_y == 8 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.customize_styles?.general_properties?.margin_y == 16 ? {border: "var(--mantine-color-orange-6) 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={copySelectedComponent?.customize_styles?.general_properties?.margin_y == 24 ? {border: "var(--mantine-color-orange-6) 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`}
                                            >
                                                {
                                                    [1, 2, 3, 4].map((item, index) => (

                                                        <Box
                                                            h={46}
                                                            w={46}
                                                            p={5}
                                                            style={{border: `1px solid ${copySelectedComponent?.customize_styles?.general_properties?.shadow == index ? 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"
                                                                            }
                                                                        }
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_properties', 'shadow', index.toString())}
                                                                style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${4  * item}px 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 ${copySelectedComponent?.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 ${copySelectedComponent?.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 ${copySelectedComponent?.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 ${copySelectedComponent?.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`}
                                            >
                                                {
                                                    [0, 10, 20, 30, 40].map((item,index) => (

                                                        <Button
                                                            /*onClick={() => {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_styles: {
                                                                        ...activeLayout.customize_styles,
                                                                        general_properties: {
                                                                            ...activeLayout.customize_styles.general_properties,
                                                                            shape_radius: "0"
                                                                        }
                                                                    }
                                                                })
                                                            }}*/
                                                            key={item}
                                                            onClick={() => handleStyleChange('general_properties', 'shape_radius', item.toString())}
                                                            style={copySelectedComponent?.customize_styles?.general_properties?.shape_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                            type="button"
                                                            variant="outline"
                                                            color={`gray.4`}
                                                            px={5}
                                                            py={10}
                                                            radius={item}
                                                        >
                                                            <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: "0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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`}
                                            >

                                                {
                                                    [0, 10, 50].map((item, index) => (

                                                        <Box
                                                            h={46}
                                                            w={46}
                                                            p={5}
                                                            style={{border: `1px solid ${copySelectedComponent?.customize_styles?.icon_properties?.shape_radius == item ? 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"
                                                                            }
                                                                        }
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('icon_properties', 'shape_radius', item.toString())}
                                                                variant="filled" radius={item} 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 ${copySelectedComponent?.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 ${copySelectedComponent?.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 ${copySelectedComponent?.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
                                                    // format="hexa"
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: copySelectedComponent?.customize_styles?.icon_properties?.background_color,
                                                            height: 36,
                                                            width: 36,
                                                            color: "transparent",
                                                        },
                                                    }}
                                                    variant="unstyled"
                                                    disallowInput
                                                    leftSection={` `}
                                                    leftSectionWidth={0}
                                                    rightSection={` `}
                                                    rightSectionWidth={0}
                                                    defaultValue=""
                                                    value=""
                                                    disabled={copySelectedComponent?.customize_styles?.icon_properties?.is_transparent_background}
                                                    /*onChangeEnd={(value) => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                icon_properties: {
                                                                    ...activeLayout.customize_styles.icon_properties,
                                                                    background_color: value
                                                                }
                                                            }
                                                        })

                                                    }}*/
                                                    onChangeEnd={(value) => handleStyleChange('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={copySelectedComponent?.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
                                                                }
                                                            }
                                                        })
                                                    }}*/
                                                    onChange={(event) => handleStyleChange('icon_properties', 'is_transparent_background', event.currentTarget.checked)}
                                                />

                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Icon Size</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >

                                                {
                                                    ["32.0", "24.0", "16.0"].map((item, index) => (

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

                                                    ))
                                                }
                                                {/*<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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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`}
                                            >
                                                {
                                                    ["4.0", "1.0", "2.0"].map((item, index) => (

                                                        <ActionIcon
                                                            /*onClick={() => {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_styles: {
                                                                        ...activeLayout.customize_styles,
                                                                        icon_properties: {
                                                                            ...activeLayout.customize_styles.icon_properties,
                                                                            weight: "4.0"
                                                                        }
                                                                    }
                                                                })
                                                            }}*/
                                                            key={item}
                                                            onClick={() => handleStyleChange('icon_properties', 'weight', item)}
                                                            variant="outline" radius={4} aria-label="Icon"
                                                            h={46}
                                                            w={46}
                                                            p={5}
                                                            color={copySelectedComponent?.customize_styles?.icon_properties?.weight == item ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                        >
                                                            <IconUser style={{width: '70%', height: '70%'}} color="#475177" stroke={item}/>
                                                        </ActionIcon>

                                                    ))
                                                }
                                                {/*<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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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}
                                                >

                                                    {
                                                        [0, 8, 16, 20, 24].map((item, index) => (

                                                            <Button
                                                                /*onClick={() => {
                                                                    setActiveLayout({
                                                                        ...activeLayout,
                                                                        customize_styles: {
                                                                            ...activeLayout.customize_styles,
                                                                            icon_properties: {
                                                                                ...activeLayout.customize_styles.icon_properties,
                                                                                padding_x: "0"
                                                                            }
                                                                        }
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('icon_properties', 'padding_x', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.icon_properties?.padding_x == item ? {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 + item}
                                                                h={36}
                                                                radius={4}
                                                                p={0}
                                                            >
                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12} />
                                                                <Text fz={12} px={index}>{item}</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: "0"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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}
                                                >

                                                    {
                                                        [0, 8, 16, 20, 24].map((item, index) => (

                                                            <Button
                                                                /*onClick={() => {
                                                                    setActiveLayout({
                                                                        ...activeLayout,
                                                                        customize_styles: {
                                                                            ...activeLayout.customize_styles,
                                                                            icon_properties: {
                                                                                ...activeLayout.customize_styles.icon_properties,
                                                                                padding_y: "0"
                                                                            }
                                                                        }
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('icon_properties', 'padding_y', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.icon_properties?.padding_y == item ? {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 + item}
                                                                w={31}
                                                            >
                                                                <Flex direction="column" gap={0}>
                                                                    <IconSpace size={12} />
                                                                    <Text fz={12} py={index}>{item}</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: "0"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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>
                                        <Box>
                                            <Text fz={14}>Selected 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: copySelectedComponent?.customize_styles?.icon_properties?.selected_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,
                                                                    selected_color: value
                                                                }
                                                            }
                                                        })

                                                    }}*/
                                                    onChangeEnd={(value) => handleStyleChange('icon_properties', 'selected_color', value)}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Unselected 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: copySelectedComponent?.customize_styles?.icon_properties?.unselected_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,
                                                                    unselected_color: value
                                                                }
                                                            }
                                                        })

                                                    }}*/
                                                    onChangeEnd={(value) => handleStyleChange('icon_properties', 'unselected_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={{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`}
                                            >
                                                {
                                                    ["32.0", "24.0", "16.0"].map((item, index) => (

                                                        <ActionIcon
                                                            /*onClick={() => {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_styles: {
                                                                        ...activeLayout.customize_styles,
                                                                        image_properties: {
                                                                            ...activeLayout.customize_styles.image_properties,
                                                                            size: "32.0"
                                                                        }
                                                                    }
                                                                })
                                                            }}*/
                                                            key={item}
                                                            onClick={() => handleStyleChange('image_properties', 'size', item)}
                                                            variant="outline" radius={4} aria-label="Icon"
                                                            h={46}
                                                            w={46}
                                                            p={5}
                                                            color={copySelectedComponent?.customize_styles?.image_properties?.size == item ? theme.primaryColor : 'var(--mantine-color-gray-4)'}
                                                        >
                                                            <Text c="#475177">{Number(item)}</Text>
                                                        </ActionIcon>

                                                    ))
                                                }
                                                {/*<ActionIcon
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                image_properties: {
                                                                    ...activeLayout.customize_styles.image_properties,
                                                                    size: "32.0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={copySelectedComponent?.customize_styles?.image_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,
                                                                image_properties: {
                                                                    ...activeLayout.customize_styles.image_properties,
                                                                    size: "24.0"
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={copySelectedComponent?.customize_styles?.image_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,
                                                                image_properties: {
                                                                    ...activeLayout.customize_styles.image_properties,
                                                                    size: "16.0"
                                                                }
                                                            }
                                                        })

                                                    }}
                                                    variant="outline" radius={4} aria-label="Icon"
                                                    h={46}
                                                    w={46}
                                                    p={5}
                                                    color={copySelectedComponent?.customize_styles?.image_properties?.size == "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`}
                                            >

                                                {
                                                    [0, 50, 10].map((item, index) => (

                                                        <Box
                                                            h={46}
                                                            w={46}
                                                            p={5}
                                                            style={{border: `1px solid ${copySelectedComponent?.customize_styles?.image_properties?.shape_radius == item ? 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"
                                                                            }
                                                                        }
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('image_properties', 'shape_radius', item.toString())}
                                                                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 ${copySelectedComponent?.customize_styles?.image_properties?.shape_radius == 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"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        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 ${copySelectedComponent?.customize_styles?.image_properties?.shape_radius == 50 ? 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"
                                                                    }
                                                                }
                                                            })

                                                        }}
                                                        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 ${copySelectedComponent?.customize_styles?.image_properties?.shape_radius == 10 ? 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"
                                                                    }
                                                                }
                                                            })

                                                        }}
                                                        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}
                                            >

                                                {
                                                    [0, 1, 2, 3, 4].map((item, index) => (

                                                        <Button
                                                            /*onClick={() => {
                                                                setActiveLayout({
                                                                    ...activeLayout,
                                                                    customize_styles: {
                                                                        ...activeLayout.customize_styles,
                                                                        general_properties: {
                                                                            ...activeLayout.customize_styles.general_properties,
                                                                            border_width: "0"
                                                                        }
                                                                    }
                                                                })
                                                            }}*/
                                                            key={item}
                                                            onClick={() => handleStyleChange('general_properties', 'border_width', item.toString())}
                                                            style={copySelectedComponent?.customize_styles?.general_properties?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                            type="button"
                                                            variant="outline"
                                                            color="var(--mantine-color-gray-4)"
                                                            p={4}
                                                            w={67}
                                                            h={27}
                                                        >
                                                            {item === 0 && <Text c="dark.9" fz={12}>No Border</Text>}
                                                            {item !== 0 && <Box bg={copySelectedComponent?.customize_styles?.general_properties?.border_color} h={item} w={48}></Box>}
                                                        </Button>

                                                    ))
                                                }
                                                {/*<Button
                                                    onClick={() => {
                                                        setActiveLayout({
                                                            ...activeLayout,
                                                            customize_styles: {
                                                                ...activeLayout.customize_styles,
                                                                general_properties: {
                                                                    ...activeLayout.customize_styles.general_properties,
                                                                    border_width: "0"
                                                                }
                                                            }
                                                        })
                                                    }}
                                                    style={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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: copySelectedComponent?.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
                                                                }
                                                            }
                                                        })
                                                    }}*/
                                                    onChangeEnd={(value) => handleStyleChange('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}
                                                >

                                                    {
                                                        [8, 16, 20, 24].map((item, index) => (

                                                            <Button
                                                                /*onClick={() => {
                                                                    setActiveLayout({
                                                                        ...activeLayout,
                                                                        customize_styles: {
                                                                            ...activeLayout.customize_styles,
                                                                            general_properties: {
                                                                                ...activeLayout.customize_styles.general_properties,
                                                                                padding_x: "8"
                                                                            }
                                                                        }
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_properties', 'padding_x', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_properties?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                type="button"
                                                                variant="outline"
                                                                color="var(--mantine-color-dark-9)"
                                                                w={33 + item}
                                                                h={36}
                                                                radius={4}
                                                                p={0}
                                                            >
                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12} />
                                                                <Text fz={12} px={index}>{item}</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: "8"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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}
                                                >
                                                    {
                                                        [8, 16, 20, 24].map((item, index) => (

                                                            <Button
                                                                /*onClick={() => {
                                                                    setActiveLayout({
                                                                        ...activeLayout,
                                                                        customize_styles: {
                                                                            ...activeLayout.customize_styles,
                                                                            general_properties: {
                                                                                ...activeLayout.customize_styles.general_properties,
                                                                                padding_y: "8"
                                                                            }
                                                                        }
                                                                    })
                                                                }}*/
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_properties', 'padding_y', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_properties?.padding_y == item ? {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={42 + item}
                                                                w={31}
                                                            >
                                                                <Flex direction="column" gap={0}>
                                                                    <IconSpace size={12} />
                                                                    <Text fz={12} py={index}>{item}</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: "8"
                                                                    }
                                                                }
                                                            })
                                                        }}
                                                        style={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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={copySelectedComponent?.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}>
                            {
                                copySelectedComponent?.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={saving ? <Loader size="xs"/> : <IconServer/>} onClick={handleSave} disabled={saving}>Save</Button>
            </Flex>*/}
        </Box>

    );
}

export default NavbarCustomization;