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

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

const AppbarCustomization = () => {
    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(updateActiveAppbar(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) => 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) => 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
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_properties', 'margin_x', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_properties?.margin_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={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>
                                                        ))
                                                    }
                                                </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 Top</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex align="center" justify="space-between" gap={12}>
                                                    {
                                                        [0, 4, 8, 16, 24].map((item, index) => (
                                                            <Button
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_properties', 'margin_y', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_properties?.margin_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={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>
                                                        ))
                                                    }
                                                </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
                                                            key={item}
                                                            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={() => 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>

                                                    ))
                                                }

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

                                                    ))
                                                }
                                            </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, 50, 10].map((item, index) => (

                                                        <Box
                                                            key={item}
                                                            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={() => 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>

                                                    ))
                                                }

                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Icon Background Color</Text>
                                            <Flex align="center" justify="flex-end" gap="md">
                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: copySelectedComponent?.customize_styles?.icon_properties?.background_color,
                                                            height: 36,
                                                            width: 36,
                                                            color: "transparent",
                                                        },
                                                    }}
                                                    variant="unstyled"
                                                    disallowInput
                                                    leftSection={` `}
                                                    leftSectionWidth={0}
                                                    rightSection={` `}
                                                    rightSectionWidth={0}
                                                    defaultValue=""
                                                    value=""
                                                    onChangeEnd={(value) => 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) => handleStyleChange('icon_properties', 'is_transparent_background', event.currentTarget.checked)}
                                                />

                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Icon Color</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                gap={`md`}
                                            >
                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: copySelectedComponent?.customize_styles?.icon_properties?.color,
                                                            height: 36,
                                                            width: 36,
                                                            color: "transparent",
                                                        },
                                                    }}
                                                    variant="unstyled"
                                                    disallowInput
                                                    leftSection={` `}
                                                    leftSectionWidth={0}
                                                    rightSection={` `}
                                                    rightSectionWidth={0}
                                                    defaultValue=""
                                                    value=""
                                                    onChangeEnd={(value) => handleStyleChange('icon_properties', 'color', value)}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Icon Size</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                {
                                                    ["32.0", "24.0", "16.0"].map((item, index) => (


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

                                                    ))
                                                }

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

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

                                                        ))
                                                    }
                                                </Flex>
                                            </Flex>
                                        </Box>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)'}} value={`Image Properties`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>{`Image Properties`}</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Box>
                                            <Text fz={14}>Image Size</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                {
                                                    ["32.0", "24.0", "16.0"].map((item, index) => (

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

                                                    ))
                                                }
                                            </Flex>
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Image Shape Radius</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >

                                                {
                                                    ["0.0", "50.0", "10.0"].map((item, index) => (

                                                        <Box
                                                            key={item}
                                                            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={() => handleStyleChange('image_properties', 'shape_radius', item)}
                                                                variant="filled" radius={item}
                                                                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
                                                            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}
                                                        >
                                                            {0 === item && <Text c={`dark.9`} fz={12}>No Border</Text>}
                                                            {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.general_properties?.border_color} h={item} 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) => 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
                                                                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>
                                                        ))
                                                    }
                                                </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
                                                                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>
                                                        ))
                                                    }
                                                </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 AppbarCustomization;