import {useCallback, useEffect, useMemo, useState} from "react";
import {Button, Card, Divider, Paragraph, useTheme} from "react-native-paper";
import {StyleSheet, TextInput, TouchableOpacity, View} from "react-native";

import RealmContext from "../models/RealmContext";
import {generateCardNumber} from "../models/AM-API";
import {AMCard} from "../models/AMCard";

const {useRealm} = RealmContext;

export default function CardAddModal({navigation}) {
    const theme = useTheme();
    const themedStylesheet = useMemo(() => StyleSheet.create({
        ...styles,
        formItemInput: {
            flex: 1,
            color: theme.colors.onSurface
        },
        formFootnote: {
            fontSize: 13,
        },
        headerText: {
            color: theme.colors.primary
        }
    }), [theme]);

    // state values
    const realm = useRealm();
    const [cardName, setCardName] = useState('');
    const [cardNumber, setCardNumber] = useState('');

    const cardAddCallback = useCallback((cardId: string, cardName: string) => {
        const duplicateCard = realm.objects<AMCard>("card").find(x => x.code == cardNumber);

        if (duplicateCard) {
            realm.write(() => {
                duplicateCard.name = cardName;
            });
        } else {
            realm.write(() => {
                realm.create("card", AMCard.generate(cardId, cardName));
            });
        }

        navigation.navigate('card-listing');
    }, [realm]);

    // header effects
    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => <TouchableOpacity onPress={() => navigation.goBack()}>
                <Paragraph style={themedStylesheet.headerText}>Cancel</Paragraph>
            </TouchableOpacity>,
        });
    }, [navigation, themedStylesheet]);

    useEffect(() => {
        const canSave = cardName.length && cardNumber.length === 20;
        const themeOptions = canSave ? themedStylesheet.headerText : {color: theme.colors.outline};

        navigation.setOptions({
            headerRight: () => <TouchableOpacity disabled={!canSave} onPress={() => cardAddCallback(cardNumber, cardName)}>
                <Paragraph style={{...themeOptions, fontWeight: "600"}}>Save</Paragraph>
            </TouchableOpacity>
        })
    }, [navigation, themedStylesheet, cardName, cardNumber]);

    return (<View style={{display: "flex", gap: 10, justifyContent: "center", paddingHorizontal: 15, paddingTop: 25}}>
        <Card>
            <Card.Content>
                <View style={themedStylesheet.formItemRow}>
                    <Paragraph style={themedStylesheet.formItemName}>
                        Card Name
                    </Paragraph>
                    <TextInput style={themedStylesheet.formItemInput}
                               numberOfLines={1} autoFocus
                               value={cardName}
                               onChangeText={setCardName}
                               placeholder="Primary Card"
                               placeholderTextColor={theme.colors.outline}/>
                </View>

                <Divider style={{marginVertical: 15}}/>

                <View style={themedStylesheet.formItemRow}>
                    <Paragraph style={themedStylesheet.formItemName}>
                        Matrix Code
                    </Paragraph>
                    <TextInput style={themedStylesheet.formItemInput}
                               numberOfLines={1}
                               placeholder="0000 0000 0000 0000 0000"
                               placeholderTextColor={theme.colors.outline}
                               value={cardNumber.match(/.{1,4}/g)?.join(" ")}
                               onChangeText={val => setCardNumber(val?.replaceAll(/\D/g, '').substring(0, 20) ?? '')}/>
                </View>
            </Card.Content>
        </Card>

        <Paragraph style={themedStylesheet.formFootnote}>
            If you have a physical card, you can enter the 20-digit code on the back.
        </Paragraph>

        <Button mode="text" onPress={() => setCardNumber(generateCardNumber())}>Generate Matrix Code</Button>
    </View>)
}

const styles = StyleSheet.create({
    formItemName: {
        minWidth: 100,
        fontWeight: "400"
    },
    formItemRow: {
        flexDirection: "row",
        alignItems: "center"
    },
    formItemDivider: {
        marginVertical: 15
    }
})