import {
    Box,
    Button, FileButton, Flex,
    Group, Loader,
    rem, Switch,
    Text, Textarea,
    TextInput,
    Title,
    Tooltip,
    useMantineTheme
} from "@mantine/core";
import {
    IconAlertTriangle,
    IconCheck,
    IconFileText, IconHelpCircle, IconServer
} from "@tabler/icons-react";
import {notifications} from "@mantine/notifications";
import {isNotEmpty, useForm} from "@mantine/form";
import {useDispatch, useSelector} from "react-redux";
import { saveNotificationConfig} from "../../../features/config/configThunks";
import {useDisclosure} from "@mantine/hooks";

export default function NotificationSettings(){
    const theme = useMantineTheme();
    const dispatch = useDispatch();
    const {config} = useSelector(state => state.config);
    const [submitted, handlersSubmit] = useDisclosure(false);

    const notificationConfigForm = useForm({
        initialValues: {
            appza_notification_status: config?.appza_notification_status,
            appza_notification_client_email: config?.appza_notification_client_email,
            appza_notification_private_key: config?.appza_notification_private_key,
            appza_notification_google_service_json: config?.appza_notification_google_service_json,
            appza_notification_google_service_plist: config?.appza_notification_google_service_plist,
        },

        validate: {
            appza_notification_client_email: isNotEmpty('Required!'),
            appza_notification_private_key: isNotEmpty('Required!'),
        },
    });

    const handleSave = () => {

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


        dispatch(saveNotificationConfig(notificationConfigForm.values))
            .unwrap()
            .then(res => {
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-orange-7)',
                    title: 'Updated!',
                    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.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            })
            .finally(() => handlersSubmit.close())
    }

    return(
        <>
            <Group justify="space-between" py="md">
                <Title order={5}>Firebase Setup</Title>
                <Switch
                    {...notificationConfigForm.getInputProps('appza_notification_status', { type: 'checkbox' })}
                    size="xs"
                    label=""
                    radius="sm"
                />
            </Group>
            <Box component="form" onSubmit={notificationConfigForm.onSubmit(handleSave)}>
                <TextInput
                    label={
                        <Flex align="center" gap={5}>
                            <Text size="sm">Client Email <Text span c={theme.colors.red[7]}>*</Text></Text>
                            <Tooltip
                                multiline
                                color={theme.primaryColor}
                                withArrow
                                transitionProps={{ duration: 200 }}
                                label=""
                            >
                                <IconHelpCircle color={theme.colors.gray[5]} size={16}/>

                            </Tooltip>
                        </Flex>
                    }
                    placeholder="firebase- abcdadi-fbsc@fc-stnd-kllone-aapp.iam.gserviceacght.com"
                    // defaultValue={config?.appza_ios_issuer_id}
                    {...notificationConfigForm.getInputProps('appza_notification_client_email')}
                />
                <Textarea
                    mt="xs"
                    autosize
                    label={
                        <Flex align="center" gap={5}>
                            <Text size="sm">Private Key <Text span c={theme.colors.red[7]}>*</Text></Text>
                            <Tooltip
                                multiline
                                color={theme.primaryColor}
                                withArrow
                                transitionProps={{ duration: 200 }}
                                label=""
                            >
                                <IconHelpCircle color={theme.colors.gray[5]} size={16}/>

                            </Tooltip>
                        </Flex>
                    }
                    placeholder="-----BEGIN PRIVATE KEY-----
MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC7Hvr/Xr8zcfJd uK6YAdSUDxndsfr33ImCJ/+BMJanIMDTbEoa86kl5iSsMQ3Gy3wpfjYXlRIFKuC+ApMUmf+9SxcJlkMyta4DRSRkDMfgVZUVgr7NckOGnq0O20oZd9KE9PDlUTnoGIY0-----END PRIVATE KEY-----"
                    // defaultValue={config?.appza_ios_key_id}
                    {...notificationConfigForm.getInputProps('appza_notification_private_key')}
                />
                <Box mt="xs">
                    <Flex align="center" gap={5}>
                        <Text fz="sm">Google Service Json </Text>
                        <Tooltip
                            multiline
                            color={theme.primaryColor}
                            withArrow
                            transitionProps={{ duration: 200 }}
                            label=""
                        >
                            <IconHelpCircle color={theme.colors.gray[5]} size={16}/>

                        </Tooltip>
                    </Flex>

                    <FileButton
                        accept="application/json"
                        {...notificationConfigForm.getInputProps('appza_notification_google_service_json')}

                    >
                        {(props) => <Button
                            {...props}
                            fullWidth
                            p={0}
                            color={theme.colors.gray[7]}
                            variant="outline"
                            justify="flex-start"
                            leftSection={
                                <Box bg={theme.colors.gray[2]} w={120} p="xs"><Text c="#475177" fw={500} size="sm">Choose File</Text></Box>
                            }
                            style={{
                                border: `1px solid ${theme.colors.gray[4]}`,
                            }}
                        >
                            {
                                typeof notificationConfigForm.getValues()['appza_notification_google_service_json'] !== 'object' && config?.appza_notification_google_service_json_file_name && <Flex align="center" gap={5}><IconFileText size={16}/> <Text fw={400} size="sm">{config?.appza_notification_google_service_json_file_name}</Text></Flex>
                            }

                            {
                                typeof notificationConfigForm.getValues()['appza_notification_google_service_json'] === 'object' && <Flex align="center" gap={5}><IconFileText size={16}/> <Text fw={400} size="sm">{notificationConfigForm.getValues()['appza_notification_google_service_json']?.name}</Text></Flex>
                            }
                        </Button>
                        }
                    </FileButton>
                    {/*<Text size="xs" c="dimmed">Recommended size: 512x512 pixels, File type: PNG (with a transparent background)</Text>*/}
                </Box>

                <Box mt="xs">
                    <Flex align="center" gap={5}>
                        <Text fz="sm">Google Service Plist </Text>
                        <Tooltip
                            multiline
                            color={theme.primaryColor}
                            withArrow
                            transitionProps={{ duration: 200 }}
                            label=""
                        >
                            <IconHelpCircle color={theme.colors.gray[5]} size={16}/>

                        </Tooltip>
                    </Flex>

                    <FileButton
                        accept={{
                            'application/xml' : ['.plist']
                        }}
                        {...notificationConfigForm.getInputProps('appza_notification_google_service_plist')}

                    >
                        {(props) => <Button
                            {...props}
                            fullWidth
                            p={0}
                            color={theme.colors.gray[7]}
                            variant="outline"
                            justify="flex-start"
                            leftSection={
                                <Box bg={theme.colors.gray[2]} w={120} p="xs"><Text c="#475177" fw={500} size="sm">Choose File</Text></Box>
                            }
                            style={{
                                border: `1px solid ${theme.colors.gray[4]}`,
                            }}
                        >
                            {
                                typeof notificationConfigForm.getValues()['appza_notification_google_service_plist'] !== 'object' && config?.appza_notification_google_service_plist_file_name && <Flex align="center" gap={5}><IconFileText size={16}/> <Text fw={400} size="sm">{config?.appza_notification_google_service_plist_file_name}</Text></Flex>
                            }

                            {
                                typeof notificationConfigForm.getValues()['appza_notification_google_service_plist'] === 'object' && <Flex align="center" gap={5}><IconFileText size={16}/> <Text fw={400} size="sm">{notificationConfigForm.getValues()['appza_notification_google_service_plist']?.name}</Text></Flex>
                            }

                        </Button>
                        }
                    </FileButton>
                    {/*<Text size="xs" c="dimmed">Recommended size: 512x512 pixels, File type: PNG (with a transparent background)</Text>*/}
                </Box>

                <Group justify="flex-end" mt="sm">
                    <Button type="submit" disabled={submitted} leftSection={submitted ? <Loader size="xs"/>: <IconServer/>} >Save</Button>
                </Group>
            </Box>
        </>
    )
}