import {
    Box,
    Button,
    Center,
    ColorInput,
    ColorPicker,
    Container,
    Flex,
    Grid,
    Paper, Select,
    Slider,
    Stack,
    Tabs,
    Text,
    useMantineTheme
} from '@mantine/core';
import {useState} from "@wordpress/element";
import {IconHome} from "@tabler/icons-react";
import {useViewportSize} from "@mantine/hooks";
import {Link} from "react-router-dom";
import * as TablerIcons from "@tabler/icons-react";

const MakeComponentMainPage = () => {
    const theme = useMantineTheme();
    const {height, width}= useViewportSize();
    const [appbar, setAppbar] = useState({
        backgroundColor: theme.colors.green[8],
        color: theme.white,
        shadow: 10,
        border: true,
        borderColor: theme.colors.red[3],
        padding: 15,
        radius: 0,
        items: {
            left: [
                { type: 'icon', value: 'IconMenu2' },
                // { type: 'icon', value: 'IconScan' },
            ],
            center: [
                { type: 'text', value: 'Page Title' },
            ],
            right: [
                { type: 'icon', value: 'IconUserCircle' },
                { type: 'icon', value: 'IconBell' },
                { type: 'text', value: 'Hello' },
            ],
        }
    });

    return (
        <>
            <Box id="appza-premium"></Box>
            <Container fluid bg="transparent" style={{ borderBottom: '1px solid var(--mantine-color-gray-3)'}}>

                <Grid align="center" py={5}>
                    <Grid.Col span={5}>
                        <Link to="/">
                            <Button
                                leftSection={<IconHome/>}
                                size="xs"
                            >
                                Home
                            </Button>
                        </Link>
                    </Grid.Col>
                    <Grid.Col span="auto"></Grid.Col>
                </Grid>
            </Container>

            <Grid>
                <Grid.Col span={8}>
                    <Center h={height - 200}>
                        <Box
                            w={350}
                            bg={appbar.backgroundColor}
                            c={appbar.color}
                            p={appbar.padding}
                            style={{
                                border: appbar.border ? `1px solid ${appbar.borderColor}` : 'none',
                                borderBottomRightRadius: appbar.radius,
                                borderBottomLeftRadius: appbar.radius,
                                boxShadow: `0 0 10px 0 ${appbar.shadow}`,
                            }}

                        >
                            <Flex justify="space-between" align="center">
                                {
                                    Object.keys(appbar.items)?.map((key, index) => (
                                        <Flex key={index} align="center">
                                            {
                                                appbar.items[key]?.map((item, index) => {
                                                    if (item.type === 'icon'){
                                                        const ICON = TablerIcons[item.value] === undefined ? TablerIcons['IconHelpSmall'] : TablerIcons[item.value]

                                                        return <ICON key={index}/>
                                                    }
                                                    if (item.type === 'text'){
                                                        return <Text key={index}>{item.value}</Text>
                                                    }
                                                })
                                            }
                                        </Flex>
                                    ))
                                }
                            </Flex>
                        </Box>
                    </Center>

                </Grid.Col>
                <Grid.Col span="auto">
                    <Stack>
                        <ColorInput
                            styles={{
                                wrapper: {
                                    padding: 5,
                                    border: "var(--mantine-color-gray-2) 1px solid",
                                    borderRadius: "var(--mantine-radius-sm)",
                                },
                                input: {
                                    backgroundColor: appbar.backgroundColor,
                                    height: 36,
                                    // width: 36,
                                    color: "transparent",
                                },
                            }}
                            variant="unstyled"
                            disallowInput
                            leftSection={` `}
                            leftSectionWidth={0}
                            rightSection={` `}
                            rightSectionWidth={0}
                            defaultValue=""
                            label="Background color"
                            value={appbar.backgroundColor}
                            onChange={(color) => setAppbar({ ...appbar, backgroundColor: color })}
                            swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                        />
                        <ColorInput
                            styles={{
                                wrapper: {
                                    padding: 5,
                                    border: "var(--mantine-color-gray-2) 1px solid",
                                    borderRadius: "var(--mantine-radius-sm)",
                                },
                                input: {
                                    backgroundColor: appbar.color,
                                    height: 36,
                                    // width: 36,
                                    color: "transparent",
                                },
                            }}
                            variant="unstyled"
                            disallowInput
                            leftSection={` `}
                            leftSectionWidth={0}
                            rightSection={` `}
                            rightSectionWidth={0}
                            defaultValue=""
                            label="Color"
                            value={appbar.color}
                            onChange={(value) => setAppbar({ ...appbar, color: value })}
                            swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                        />
                        <Box>
                            <Text>Border radius</Text>
                            <Slider
                                min={0}
                                max={50}
                                value={appbar.radius}
                                onChange={(value) => setAppbar({ ...appbar, radius: value })}

                            />
                        </Box>
                        <Box>
                            <Text>Padding</Text>
                            <Slider
                                min={0}
                                max={50}
                                value={appbar.padding}
                                onChange={(value) => setAppbar({ ...appbar, padding: value })}

                            />
                        </Box>
                        <Box>
                            <Text>Inner Items</Text>
                            <Tabs defaultValue="left">
                                <Tabs.List>
                                    <Tabs.Tab value="left">Left</Tabs.Tab>
                                    <Tabs.Tab value="center">Center</Tabs.Tab>
                                    <Tabs.Tab value="right">Right</Tabs.Tab>
                                </Tabs.List>

                                <Tabs.Panel value="left">
                                    <Select
                                        data={Object.keys(TablerIcons)?.map((icon) => {
                                            //remove Icon from the icon name and space between words
                                            const label = icon.replace('Icon', '').replace(/([a-z0-9])([A-Z])/g, '$1 $2');
                                            return {
                                                value: icon,
                                                label: label,
                                            };
                                        })}
                                        maxDropdownHeight={200}
                                        onChange={(value) => {
                                            setAppbar({
                                                ...appbar,
                                                items: {
                                                    ...appbar.items,
                                                    left: [
                                                        ...appbar.items.left,
                                                        { type: 'icon', value: value },
                                                    ],
                                                },
                                            });
                                        }}
                                        label="Select Icon"
                                        placeholder="Select Icon"
                                        searchable
                                        nothingFoundMessage="Nothing found..."
                                        checkIconPosition="right"
                                    />
                                </Tabs.Panel>
                                <Tabs.Panel value="center">Center</Tabs.Panel>
                                <Tabs.Panel value="right">Right</Tabs.Panel>
                            </Tabs>
                        </Box>

                    </Stack>
                </Grid.Col>
            </Grid>
        </>
    );
}

export default MakeComponentMainPage;