import {generateCardNumber} from "amnet-shared";
import {useModalStyles} from "../utils/ModalStyles";
import {useCallback, useLayoutEffect, useState} from "react";
import {TextInput, TouchableOpacity, View} from "react-native";
import {Button, Card, Divider, Paragraph, useTheme} from "react-native-paper";

import {AMCard} from "../models/AMCard";
import RealmContext from "../models/RealmContext";

const {useRealm} = RealmContext;

export default function CardAddModal({navigation, route}) {
    const realm = useRealm();
    const theme = useTheme();
    const modalStyles = useModalStyles();

    // state values
    const [cardName, setCardName] = useState('');
    const [cardNumber, setCardNumber] = useState('');
    const [cardNumberReadOnly, setCardNumberReadOnly] = useState(false);

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

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

        navigation.goBack();
    }, [realm]);

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

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

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

    // enable renaming by passing cardId to modal
    useLayoutEffect(() => {
        if (!route.params?.cardId) {
            setCardNumberReadOnly(false);
            return;
        }

        setCardNumber(route.params.cardId);
        setCardNumberReadOnly(true);

        if (route.params.cardName) {
            setCardName(route.params.cardName);
        }

        navigation.setOptions({
            title: "Edit Card"
        });
    }, [route]);

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

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

                <View style={modalStyles.formItemRow}>
                    <Paragraph style={modalStyles.formItemName}>
                        Matrix Code
                    </Paragraph>
                    <TextInput numberOfLines={1}
                               keyboardType="numeric"
                               readOnly={cardNumberReadOnly}
                               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) ?? '')}
                               style={{...modalStyles.formItemInput, color: cardNumberReadOnly ? theme.colors.backdrop : undefined}}/>
                </View>
            </Card.Content>
        </Card>

        {/*only show card entry info when in create mode*/}
        {!cardNumberReadOnly && (
            <>
                <Paragraph style={modalStyles.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>)
}