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

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

    const socialLoginConfigForm = useForm({
        initialValues: {
            appza_social_login_status: config?.appza_social_login_status || false,
            appza_google_login_web_client_id_status: config?.appza_google_login_web_client_id_status || false,
            appza_google_login_ios_client_id_status: config?.appza_google_login_ios_client_id_status || false,
            appza_google_web_client_id: config?.appza_google_web_client_id,
            appza_google_ios_client_id: config?.appza_google_ios_client_id,
        },

        validate: {
            appza_google_web_client_id: isNotEmpty('Required!'),
            appza_google_ios_client_id: 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(saveSocialLoginConfig(socialLoginConfigForm.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}>Social Login</Title>
                <Switch
                    {...socialLoginConfigForm.getInputProps('appza_social_login_status', { type: 'checkbox' })}
                    labelPosition="left"
                    size="xs"
                    label={
                        <Flex align="center" gap={5}>
                            <Text size="sm">Button</Text>
                            <Tooltip
                                multiline
                                color={theme.primaryColor}
                                withArrow
                                transitionProps={{ duration: 200 }}
                                label="Toggle will show  “This button will turn the ‘Login with Google’ option on or off in the app."
                            >
                                <IconHelpCircle color={theme.colors.gray[5]} size={16}/>

                            </Tooltip>
                        </Flex>
                    }
                    radius="sm"
                    color="green"
                />
            </Group>
            <Divider/>

            <Title order={5}>Google Login</Title>

            <Box component="form" onSubmit={socialLoginConfigForm.onSubmit(handleSave)}>
                <TextInput
                    label={
                        <Flex align="center" justify="space-between">
                            <Group gap={5}>
                                <Text size="sm">Web Client ID <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>
                            </Group>
                            <Switch
                                {...socialLoginConfigForm.getInputProps('appza_google_login_web_client_id_status', { type: 'checkbox' })}
                                size="xs"
                                label=""
                                radius="sm"
                            />
                        </Flex>
                    }
                    styles={{
                        label: {
                            width: '100%',
                        }
                    }}
                    placeholder="227576826412-4rh3d6dit1mg5dlj9n5agg4.apps.googleusercontent.com"
                    // defaultValue={config?.appza_web_client_id}
                    {...socialLoginConfigForm.getInputProps('appza_google_web_client_id')}
                />
                <TextInput
                    mt="sm"
                    label={
                        <Flex align="center" justify="space-between">
                            <Group gap={5}>
                                <Text size="sm">IOS Client ID <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>
                            </Group>
                            <Switch
                                {...socialLoginConfigForm.getInputProps('appza_google_login_ios_client_id_status', { type: 'checkbox' })}
                                size="xs"
                                label=""
                                radius="sm"
                            />
                        </Flex>
                    }
                    styles={{
                        label: {
                            width: '100%',
                        }
                    }}
                    placeholder="227576826412-unkqlibf0dttl7n0nkqn7bvc.apps.googleusercontent.com"
                    // defaultValue={config?.appza_ios_client_id}
                    {...socialLoginConfigForm.getInputProps('appza_google_ios_client_id')}
                />
                <Group justify="flex-end" mt="sm">
                    <Button type="submit" disabled={submitted} leftSection={submitted ? <Loader size="xs"/>: <IconServer/>} >Save</Button>
                </Group>
            </Box>
        </>
    )
}