import {
    Accordion, ActionIcon, Box, Burger, Button, ColorInput, Flex,
    Group, Loader, rem, ScrollArea, Skeleton, Stack, Switch, Tabs,
    Text, TextInput, useMantineTheme
} from "@mantine/core";
import {useEffect, useState} from "@wordpress/element";
import {notifications} from "@mantine/notifications";
import {
    IconCheck, IconServer,
    IconSpace,
    IconSpacingHorizontal,
    IconSpacingVertical,
    IconUser,
} from "@tabler/icons-react";
import Component from "./Component";
import {useDisclosure, useViewportSize} from "@mantine/hooks";
import {useDispatch, useSelector} from "react-redux";
import {setIsDirty, updateCopySelectedComponentStyles} from "../../../features/selectedComponent/selectedComponentSlice";
import {saveDrawer} from "../../../features/globalComponents/globalComponentsThunks";
import {updateActiveDrawer} from "../../../features/globalComponents/activeDrawerSlice";

const DrawerCustomization = () => {
    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(updateActiveDrawer(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}>Shadow</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                {
                                                    [0, 1, 2, 3].map((item, index) => (

                                                        <Box
                                                            key={item}
                                                            h={46}
                                                            w={46}
                                                            p={5}
                                                            style={{border: `1px solid ${copySelectedComponent?.customize_styles?.general_properties?.shadow == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`, borderRadius: 4}}>
                                                            <ActionIcon
                                                                onClick={() => handleStyleChange('general_properties', 'shadow', item.toString())}
                                                                style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${4 * (item + 1)}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={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>

                                                    ))
                                                }

                                            </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",
                                                        },
                                                    }}
                                                    disabled={copySelectedComponent?.customize_styles?.icon_properties?.is_transparent_background}
                                                    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>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)'}} value={`Text Properties`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>{`Text Properties`}</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Box>
                                            <Text fz={14}>Title 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?.text_properties?.color,
                                                            height: 36,
                                                            width: 36,
                                                            color: "transparent",
                                                        },
                                                    }}
                                                    variant="unstyled"
                                                    disallowInput
                                                    leftSection={` `}
                                                    leftSectionWidth={0}
                                                    rightSection={` `}
                                                    rightSectionWidth={0}
                                                    defaultValue=""
                                                    value=""
                                                    onChangeEnd={(value) => handleStyleChange('text_properties', 'color', value)}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>

                                        </Box>
                                        <Box>
                                            <Text fz={14}>Title Text (Example)</Text>
                                            <TextInput
                                                defaultValue={copySelectedComponent?.customize_styles?.text_properties?.text}
                                                fw={copySelectedComponent?.customize_styles?.text_properties?.font_weight}
                                                td={copySelectedComponent?.customize_styles?.text_properties?.text_decoration}
                                                fs={copySelectedComponent?.customize_styles?.text_properties?.font_style}
                                                size="xs"
                                                onChange={(event) => handleStyleChange('text_properties', 'text', event.currentTarget.value)}
                                            />
                                        </Box>
                                        <Box>
                                            <Text fz={14}>Title Style</Text>
                                            <Flex
                                                align="center"
                                                justify="flex-end"
                                                color="gray"
                                                gap={`md`}
                                            >
                                                <Button
                                                    onClick={() => handleStyleChange('text_properties', 'font_weight', copySelectedComponent?.customize_styles?.text_properties?.font_weight == 700 ? 500 : 700)}
                                                    style={copySelectedComponent?.customize_styles?.text_properties?.font_weight == 700 ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                    type="button"
                                                    variant="outline"
                                                    color="var(--mantine-color-gray-4)"
                                                    h={46}
                                                    w={60}
                                                    p={0}
                                                >
                                                    <Text c="#475177" fw={700} fz={14}>Bold</Text>
                                                </Button>

                                                <Button

                                                    onClick={() => handleStyleChange('text_properties', 'font_style', copySelectedComponent?.customize_styles?.text_properties?.font_style === 'italic' ? 'normal' : 'italic')}
                                                    style={copySelectedComponent?.customize_styles?.text_properties?.font_style === 'italic' ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                    type="button"
                                                    variant="outline"
                                                    color="var(--mantine-color-gray-4)"
                                                    h={46}
                                                    w={58}
                                                    p={0}
                                                >
                                                    <Text c="#475177" fs="italic">Italic</Text>
                                                </Button>

                                                <Button
                                                    onClick={() => handleStyleChange('text_properties', 'text_decoration', copySelectedComponent?.customize_styles?.text_properties?.text_decoration === 'underline' ? 'none' : 'underline')}
                                                    style={copySelectedComponent?.customize_styles?.text_properties?.text_decoration === 'underline' ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                    type="button"
                                                    variant="outline"
                                                    color="var(--mantine-color-gray-4)"
                                                    h={46}
                                                    w={93}
                                                    p={0}
                                                >
                                                    <Text c="#475177" td="underline">Underline</Text>
                                                </Button>
                                            </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}>
                            {
                                activeLayout?.components?.map((component, index) => <Component key={component.id} index={index} component={component} activeLayout={activeLayout} setActiveLayout={setActiveLayout}/>)
                            }
                        </Stack>

                    </Tabs.Panel>
                </ScrollArea>
            </Tabs>
            {/*<Flex justify="flex-end" align="center" pr="sm">
                <Button leftSection={saving ? <Loader size="xs"/> : <IconServer/>} onClick={handleSave} disabled={saving}>Save</Button>
            </Flex>*/}
        </Box>

    );
}

export default DrawerCustomization;