import {useEffect, useState} from '@wordpress/element';
import {
    Stack,
    rem,
    Text,
    Image,
    Flex,
    Box,
    Grid,
    TextInput,
    Select,
    ColorInput,
    Button,
    Tabs,
    useMantineTheme,
    Group,
    Title, Center, LoadingOverlay, Switch, Divider, Paper, ThemeIcon, Tooltip
} from "@mantine/core";
import { Dropzone } from '@mantine/dropzone';
import {
    IconUpload,
    IconX,
    IconPencilMinus,
    IconCloudUpload,
    IconChevronDown,
    IconCheck,
    IconServer,
    IconSettings,
    IconLayersIntersect,
    IconSticker,
    IconSettingsPlus,
    IconHistory,
    IconLock,
    IconBrandApple,
    IconBrandAndroid,
    IconSpeakerphone,
    IconConfetti,
    IconFileCertificate,
    IconAlertTriangle,
    IconReload,
    IconArrowRight, IconTool, IconLayersIntersect2
} from "@tabler/icons-react";
import {notifications} from "@mantine/notifications";
import axios from "axios";
import {useDisclosure} from "@mantine/hooks";
import {useForm} from "@mantine/form";
import GlobalMediaUploadAreaPlaceholder from "./../../../../../assets/images/global_media_upload_area_placeholder.png";
import {modals} from "@mantine/modals";
import {DISABLE_SUPPORTS} from "../../../../utils/constant";


const Settings = ({setIsSupportPluginChange, handlesSettingsModal, handlesThemesModal}) => {

    const theme = useMantineTheme();
    const [settingsData, setSettingsData] = useState(null);
    const [supportPlugins, setSupportPlugins] = useState([]);
    const [loading, handlersLoading] = useDisclosure(true);
    const [isSupportPluginsLoading, supportPluginsLoadingHandlers] = useDisclosure(false);
    const [isReloadSupportPlugins, reloadSupportPluginsHandlers] = useDisclosure(false);
    const [isSupportPluginChange, supportPluginChangeHandlers] = useDisclosure(false);


    const iosKeyForm = useForm({
        initialValues: {
            appza_ios_issuer_id: '',
            appza_ios_key_id: '',
            appza_ios_team_id: '',
            appza_ios_p8_file: '',
        },

        validate: {
            // ios_issuer_id: isNotEmpty('Put the ID!'),
            // ios_key_id: isNotEmpty('Put the key!'),
            // ios_p8_file: isNotEmpty('Put the file!'),
        },
    });


    const getSettings = () => {
        axios({
            method: 'get',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/global-settings`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
        })
            .then(res => {
                setSettingsData(res.data);
                iosKeyForm.setInitialValues({
                    appza_ios_issuer_id: res.data.appza_ios_issuer_id,
                    appza_ios_key_id: res.data.appza_ios_key_id,
                    appza_ios_team_id: res.data.appza_ios_team_id,
                    appza_ios_app_store_name: res.data.appza_ios_app_store_name

                });
                iosKeyForm.setValues({
                    appza_ios_issuer_id: res.data.appza_ios_issuer_id,
                    appza_ios_key_id: res.data.appza_ios_key_id,
                    appza_ios_team_id: res.data.appza_ios_team_id,
                    appza_ios_app_store_name: res.data.appza_ios_app_store_name
                });

            })
            .catch(function (err) {
                console.log(err);
            });
    }
    const getSupportPlugins = () => {
        supportPluginsLoadingHandlers.open();
        axios({
            method: 'get',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/support-plugins`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
        })
            .then(res => {
                setSupportPlugins(res.data);
                supportPluginsLoadingHandlers.close();

            })
            .catch(function (err) {
                console.log(err);
                supportPluginsLoadingHandlers.close();

            });
    }


    const saveData = () => {
        const notificationId = notifications.show({
            color: 'var(--mantine-color-orange-2)',
            loading: true,
            title: 'Processing...',
            autoClose: false,
            withCloseButton: false,
        });
        axios({
            method: 'post',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/global-settings`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `multipart/form-data`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
            data: settingsData
        })
            .then(res => {
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-orange-7)',
                    title: res.data.message,
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });

            })
            .catch(function (err) {
                console.log(err);
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-red-9)',
                    title: err.response.data.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            });
    }

    useEffect(() => {
        getSettings();
        setTimeout(()=>{
            handlersLoading.close();
        }, 1000)
    }, []);

    useEffect(() => {
        getSupportPlugins();
    }, [isReloadSupportPlugins]);


    const iosKeyIntegration = () => {
        const notificationId = notifications.show({
            color: 'var(--mantine-color-orange-2)',
            loading: true,
            title: 'Processing...',
            autoClose: false,
            withCloseButton: false,
        });

        axios({
            method: 'post',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/key-integration`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `multipart/form-data`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
            data: iosKeyForm.values
        })
            .then(res => {
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-orange-7)',
                    title: res.data.message,
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });


            })
            .catch(function (err) {
                console.log(err);
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-red-9)',
                    title: err.response.data.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            });
    }


    const [extensionLoadingState, setExtensionLoadingState] = useState({});
    const saveExtensions = (checked, extensionSlug) => {
        modals.openConfirmModal({
            title: '',
            centered: true,
            children: (
                <Flex justify="center" align="center" gap="sm" w={`100%`} direction="column">
                    <Group gap="xs">
                        <IconAlertTriangle color={theme.primaryColor}/>
                        <Text size="sm" fw={600}>Confirmation!</Text>
                    </Group>
                    <Divider size="xs" w={`100%`} />
                    <Text size="sm" c="#4D4D4D" ta="center" my={30}>
                        Are You Sure! After changing theme will be removed.
                    </Text>
                </Flex>

            ),
            labels: {cancel: "No, Keep It.", confirm: "Yes, Proceed!"},
            // confirmProps: {color: 'var(--mantine-color-gray-2)'},
            confirmProps: {bg: theme.primaryColor, c: "#ffffff", style: {borderColor: theme.primaryColor}},
            cancelProps: {bg: 'var(--mantine-color-gray-2)', c: '#202020'},
            withCloseButton: false,
            groupProps: {justify: 'center'},
            overlayProps: {
                blur: 1,
            },
            closeOnClickOutside: false,
            modalProps:{
                body: {
                    padding: 0
                }
            },
            onCancel: () => console.log('Cancel'),
            onConfirm: () => {
                setExtensionLoadingState({...extensionLoadingState, [extensionSlug]: true});
                axios({
                    method: 'put',
                    url: `${appLocalizer.apiUrl}/appza/web/api/v1/config/extensions`,
                    headers: {
                        "Accept": `application/json`,
                        "Content-Type": `application/json`,
                        "Access-Control-Allow-Origin": '*',
                        "X-WP-Nonce": `${appLocalizer.nonce}`
                    },
                    data: {[extensionSlug]: checked}
                })
                    .then(res => {
                        setSettingsData(res.data.data);
                        setExtensionLoadingState({...extensionLoadingState, [extensionSlug]: false});
                        setIsSupportPluginChange(prevState => !prevState);
                        supportPluginChangeHandlers.open();

                    })
                    .catch(function (err) {
                        console.log(err);
                        setExtensionLoadingState({...extensionLoadingState, [extensionSlug]: false});
                        notifications.show({
                            color: 'var(--mantine-color-red-9)',
                            title: err.response.data.message,
                            icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                            loading: false,
                            autoClose: 5000,
                            withCloseButton: true,
                        });

                    });
            }
        });

    }
    useEffect(() => {
      if(window.appzaPremium){
        window.appzaPremium.licenseArea(theme);
        window.appzaPremium.globalFileUpload(theme);
        window.appzaPremium.buildHistory(theme);
      }
    }, []);

    return(
        <>
            <Tabs defaultValue="general" h={`92%`} pos="relative">
                <LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />
                <Tabs.List>
                    <Tabs.Tab leftSection={<IconSettings size={14}/>} value="general">General</Tabs.Tab>
                    <Tabs.Tab disabled={!window.appzaPremium} leftSection={<IconLock size={14}/>} value="license">License</Tabs.Tab>
                    <Tabs.Tab leftSection={<IconLayersIntersect size={14} />} value="integration">Integration</Tabs.Tab>
                    <Tabs.Tab leftSection={<IconTool size={14} />} value="app-store-config">App store config</Tabs.Tab>
                    <Tabs.Tab disabled leftSection={<IconLayersIntersect2 size={14} />} value="firebase-integration">Firebase Integration</Tabs.Tab>
                    <Tabs.Tab disabled leftSection={<IconSticker size={14} />} value="branding">Branding</Tabs.Tab>
                    <Tabs.Tab disabled={!window.appzaPremium} leftSection={<IconHistory size={14} />} value="build-history">Build History</Tabs.Tab>
                    <Tabs.Tab disabled leftSection={<IconSettingsPlus size={14} />} value="others">Others</Tabs.Tab>
                </Tabs.List>

                <Tabs.Panel value="general" h={`94%`}>
                    <Grid gutter={0} mt="xs" h={`95%`}>
                        <Grid.Col span={6}>
                            <TextInput
                                data-autofocus
                                label=""
                                placeholder="App Name"
                                rightSection={<IconPencilMinus style={{ width: rem(16), height: rem(16) }}/>}
                                defaultValue={settingsData?.app_name}
                                rightSectionPointerEvents="none"
                                onChange={(event) => setSettingsData({...settingsData, app_name: event.currentTarget.value})}
                                mb="xs"

                            />

                            <Select
                                label=""
                                searchable
                                placeholder="Primary Font"
                                data={[
                                    {value: 'Open Sans', label: 'Open Sans'},
                                    {value: 'Roboto', label: 'Roboto'},
                                    {value: 'Poppins', label: 'Poppins'},
                                ]}
                                rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                rightSectionPointerEvents="none"
                                value={settingsData?.primary_font}
                                onChange={value => setSettingsData({...settingsData, primary_font: value})}
                                allowDeselect={false}
                                nothingFoundMessage="Nothing found..."
                                maxDropdownHeight={200}
                                mb="xs"


                            />
                            <Select
                                label=""
                                searchable
                                placeholder="Secondary Font"
                                data={[
                                    {value: 'Open Sans', label: 'Open Sans'},
                                    {value: 'Roboto', label: 'Roboto'},
                                    {value: 'Poppins', label: 'Poppins'},
                                ]}
                                rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                value={settingsData?.secondary_font}
                                onChange={value => setSettingsData({...settingsData, secondary_font: value})}
                                allowDeselect={false}
                                nothingFoundMessage="Nothing found..."
                                maxDropdownHeight={200}
                                mb="xs"

                            />
                            <Flex
                                align="center"
                                justify="space-between"
                                mb="xs"
                            >
                                <Text fz={14}>Primary Font Color</Text>
                                <ColorInput
                                    styles={{
                                        wrapper: {
                                            padding: 5,
                                            border: "var(--mantine-color-gray-2) 1px solid",
                                            borderRadius: "var(--mantine-radius-sm)"
                                        },
                                        input: {
                                            backgroundColor: settingsData?.primary_font_color,
                                            height: 36,
                                            width: 36,
                                            color: "transparent",
                                        },
                                    }}
                                    defaultValue=""
                                    value=""
                                    variant="unstyled"
                                    disallowInput
                                    leftSection={` `}
                                    leftSectionWidth={0}
                                    rightSection={` `}
                                    rightSectionWidth={0}
                                    onChangeEnd={(value) => setSettingsData({...settingsData, primary_font_color: value})}
                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                />
                            </Flex>
                            <Flex
                                align="center"
                                justify="space-between"
                                mb="xs"
                            >
                                <Text fz={14}>Secondary Font Color</Text>
                                <ColorInput
                                    styles={{
                                        wrapper: {
                                            padding: 5,
                                            border: "var(--mantine-color-gray-2) 1px solid",
                                            borderRadius: "var(--mantine-radius-sm)"
                                        },
                                        input: {
                                            backgroundColor: settingsData?.secondary_font_color,
                                            height: 36,
                                            width: 36,
                                            color: "transparent",
                                        },
                                    }}
                                    defaultValue=""
                                    value=""
                                    variant="unstyled"
                                    disallowInput
                                    leftSection={` `}
                                    leftSectionWidth={0}
                                    rightSection={` `}
                                    rightSectionWidth={0}
                                    onChangeEnd={(value) => setSettingsData({...settingsData, secondary_font_color: value})}
                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                />
                            </Flex>
                        </Grid.Col>
                        <Grid.Col span="auto">
                            <Center>
                                <Box id="appza-global-file-upload" w={380}>
                                    <Image w={400} h={680} fit="contain" src={GlobalMediaUploadAreaPlaceholder} />
                                </Box>
                            </Center>
                        </Grid.Col>
                    </Grid>

                    <Group justify="flex-end">
                        <Button onClick={saveData} leftSection={<IconServer/>} >Save</Button>
                    </Group>
                </Tabs.Panel>

                <Tabs.Panel value="license">
                    <Box id="appza-license-area"></Box>
                </Tabs.Panel>

                <Tabs.Panel value="integration" pos="relative">
                    <LoadingOverlay visible={isSupportPluginsLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ type: 'dots', size: 'sm' }} />

                    {supportPlugins.length === 0 && <Center py={10}><Button variant="outline" size="xs" onClick={() => reloadSupportPluginsHandlers.toggle()} leftSection={<IconReload />}>Reload</Button></Center>}

                    {
                        supportPlugins.length !== 0 && (
                            <Flex
                                justify="space-between"
                                align="center"
                                py={10}
                            >
                                {
                                    supportPlugins?.map((plugin, index) => (
                                        <Tooltip
                                            disabled={! DISABLE_SUPPORTS.includes(plugin.slug)}
                                            position="bottom"
                                            color="white"
                                            label={
                                                <Paper withBorder p="xs" radius="md">
                                                    <Flex align="center" gap="xs">
                                                        <ThemeIcon
                                                            radius="xl"
                                                            variant="gradient"
                                                            gradient={{ from: 'indigo', to: 'violet', deg: 173 }}
                                                            p={4}
                                                        >
                                                            <IconSpeakerphone style={{transform: 'rotate(-25deg)'}}/>
                                                        </ThemeIcon>
                                                        <Box>
                                                            <Text c={theme.colors.dark[9]} fw={500}>Upcoming</Text>
                                                            <Text c="dimmed">This feature is coming soon!</Text>
                                                        </Box>
                                                    </Flex>
                                                </Paper>
                                            }
                                            styles={{
                                                tooltip: {
                                                    padding: 0,
                                                }
                                            }}
                                        >
                                            <Box pos="relative">
                                                <LoadingOverlay visible={extensionLoadingState[plugin.slug] || false} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ type: 'dots', size: 'sm' }} />

                                                <Switch
                                                    key={plugin.slug}
                                                    checked={settingsData?.extensions?.includes(plugin.slug) || 'wordpress' === plugin.slug}
                                                    onChange={
                                                        (e) => 'wordpress' !== plugin.slug && saveExtensions(e.target.checked, plugin.slug)
                                                    }
                                                    // onChange={(e) => 'wordpress' !== extension.slug && handlersExtensionLoading.open()}
                                                    size="xs"
                                                    label={
                                                        <Flex justify="flex-start" align="center" gap={6}>
                                                            <Center bg="gray.2" h={36} w={36} p={5} style={{ borderRadius: 'var(--mantine-radius-sm)'}}>
                                                                <Image fit="contain" src={plugin.image}/>
                                                            </Center>
                                                            <Text size="sm" fw={600}>{plugin.name}</Text>
                                                        </Flex>
                                                    }
                                                    radius="sm"
                                                    styles={{
                                                        body: {
                                                            alignItems: 'center',
                                                            padding: 5,
                                                            boxShadow: 'var(--mantine-shadow-md)',
                                                            borderRadius: 'var(--mantine-radius-sm)',
                                                            border: 'var(--mantine-color-gray-2) 1px solid',

                                                        }
                                                    }}

                                                    disabled={DISABLE_SUPPORTS.includes(plugin.slug)}

                                                />
                                            </Box>
                                        </Tooltip>
                                    ))
                                }
                            </Flex>
                        )
                    }
                    <Box>
                        <Group gap={2}>
                            <IconSpeakerphone color={theme.primaryColor}/>
                            <Text c={theme.primaryColor} fs="italic">Currently, Only one extension can be activated with Wordpress Core!</Text>
                        </Group>
                    </Box>

                    {isSupportPluginChange &&
                        <Paper
                            bg={theme.colors.gray[0]}
                            p="xs"
                            withBorder
                        >
                            <Flex
                                justify="space-between"
                                align="center"
                            >
                                <Text>Please Go through the themes of your selected addons, Active a theme to customize your app.</Text>
                                <Button
                                    onClick={() => {
                                        handlesThemesModal.open();
                                        handlesSettingsModal.close();
                                    }}
                                    rightSection={<IconArrowRight />}
                                >
                                    <Text fw={600}>Explore Themes</Text>
                                </Button>
                            </Flex>
                        </Paper>
                    }
                </Tabs.Panel>

                <Tabs.Panel value="app-store-config">
                    <Group gap={2} p={2} mb="xs" bg={theme.primaryColor + '.0'} style={{borderRadius: 'var(--mantine-radius-sm)'}}>
                        <IconBrandApple color={theme.primaryColor}/>
                        <Title c={theme.primaryColor} order={5}>iOS</Title>
                    </Group>
                    <Box component="form" onSubmit={iosKeyForm.onSubmit(iosKeyIntegration)}>
                        <Grid>
                            <Grid.Col span={6}>
                                {/*<TextInput
                                    label="App Store Name"
                                    placeholder="Enter Store Name"
                                    defaultValue={settingsData?.appza_ios_app_store_name}
                                    {...iosKeyForm.getInputProps('appza_ios_app_store_name')}
                                />*/}
                                <TextInput
                                    label="Issuer ID"
                                    placeholder="Enter Issuer ID"
                                    defaultValue={settingsData?.appza_ios_issuer_id}
                                    {...iosKeyForm.getInputProps('appza_ios_issuer_id')}
                                />
                                <TextInput
                                    label="Key ID"
                                    placeholder="Enter Key ID"
                                    defaultValue={settingsData?.appza_ios_key_id}
                                    {...iosKeyForm.getInputProps('appza_ios_key_id')}
                                />
                                <TextInput
                                    label="Team ID"
                                    placeholder="Enter Team ID"
                                    defaultValue={settingsData?.appza_ios_team_id}
                                    {...iosKeyForm.getInputProps('appza_ios_team_id')}
                                />
                            </Grid.Col>
                            <Grid.Col span="auto">
                                <Dropzone
                                    onDrop={(file) => {
                                        iosKeyForm.setValues({...iosKeyForm.values, appza_ios_p8_file: file[0]})
                                    }}

                                    onReject={(file) => {
                                        notifications.show({
                                            title: 'Only .p8 file!',
                                            color: 'var(--mantine-color-red-9)',
                                            autoClose: 5000,
                                            icon: <IconAlertTriangle style={{width: rem(18), height: rem(18)}}/>


                                        })
                                    }}

                                    maxSize={1024 ** 2}
                                    accept={{
                                        'application/pkcs8' : ['.p8']
                                    }}
                                    style={{border: '2px dashed var(--mantine-color-orange-4)'}}
                                    mb="xs"
                                >
                                    <Stack gap="sm" align="center" justify="center" mih={200} style={{pointerEvents: 'none'}}>
                                        <Dropzone.Accept>
                                            <IconUpload
                                                size={50}
                                                color='var(--mantine-color-blue-6)'
                                                stroke={1.5}
                                            />
                                        </Dropzone.Accept>
                                        <Dropzone.Reject>
                                            <IconX
                                                size={50}
                                                color='var(--mantine-color-red-6)'
                                                stroke={1.5}
                                            />
                                        </Dropzone.Reject>
                                        <Dropzone.Idle>

                                            {
                                                !!!iosKeyForm.values.appza_ios_p8_file && settingsData?.appza_ios_p8_file_content?.length === 0 &&
                                                <IconCloudUpload size={50} color='var(--mantine-color-dimmed)' stroke={1.5} />
                                            }
                                            {
                                                iosKeyForm.values.appza_ios_p8_file &&
                                                <Group justify="center" gap={2}>
                                                    <IconFileCertificate color={theme.primaryColor} size={57}/>
                                                    <Text size="md" fw={700} inline>{iosKeyForm.values.appza_ios_p8_file.name}</Text>
                                                </Group>
                                            }

                                            {
                                                !!!iosKeyForm.values.appza_ios_p8_file && settingsData?.appza_ios_p8_file_content?.length > 0 &&
                                                <Group justify="center" gap={2}>
                                                    <IconFileCertificate color={theme.primaryColor} size={57}/>
                                                    <Text size="md" fw={700} inline>{settingsData?.appza_ios_p8_file_name}</Text>
                                                </Group>
                                            }

                                        </Dropzone.Idle>
                                        <Text size="xl" inline>Drag File or <span style={{color: 'var(--mantine-color-orange-4)'}}>Upload</span></Text>
                                        <Text size="md" fw={700} inline>(only .p8 file)</Text>
                                    </Stack>
                                </Dropzone>
                            </Grid.Col>
                        </Grid>
                        <Group justify="flex-end">
                            <Button type="submit" leftSection={<IconServer/>} >Save</Button>
                        </Group>
                    </Box>
                    <Group gap={2} p={2} mb="xs" mt="xs" bg={theme.primaryColor + '.0'} style={{borderRadius: 'var(--mantine-radius-sm)'}}>
                        <IconBrandAndroid color={theme.primaryColor}/>
                        <Title c={theme.primaryColor} order={5}>Android</Title>
                    </Group>
                    <Box>
                        <Group gap={2}>
                            <IconSpeakerphone color={theme.primaryColor}/>
                            <Text c={theme.primaryColor} fs="italic">Do not need any configuration for android!</Text>
                            <IconConfetti color={theme.primaryColor} />
                        </Group>
                    </Box>
                </Tabs.Panel>

                <Tabs.Panel value="branding">
                    Branding

                </Tabs.Panel>

                <Tabs.Panel value="build-history">
                   <Box id="appza-app-build-history"></Box>

                </Tabs.Panel>

                <Tabs.Panel value="others">
                    Others
                </Tabs.Panel>

            </Tabs>

        </>

    );
}

export default Settings;