import {FC, useEffect, useRef} from "react";
import {GestureResponderEvent, StyleSheet, Text, TextInput, View} from "react-native";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {RFPercentage} from "react-native-responsive-fontsize";
import Modal from "react-native-modal";
import BasicButton from "../BasicButton/BasicButton";
import DText from "../DText/DText";

type Props = {
    visible: boolean
    onCancelButtonPress?: (event: GestureResponderEvent) => void,
    onChanged: (text: string) => void
}
const ScanModal: FC<Props> = ({visible, onCancelButtonPress, onChanged}) => {
    const inputRef = useRef<TextInput | null>(null);
    useEffect(() => {
        if (visible) inputRef.current?.focus();
    }, [visible]);
    return (
        <Modal isVisible={visible}>
            <View style={styles.container}>
                <DText style={styles.text}>Наведите сканер на штрихкод товара или заказа</DText>
                <BasicButton onPress={onCancelButtonPress} style={styles.cancelButton} label={"Отмена"}/>
                <TextInput onEndEditing={(e) => {
                    onChanged(e.nativeEvent.text);
                }} style={styles.pseudoInput} ref={inputRef}/>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        borderRadius: responsiveWidth(1),
        backgroundColor: "white",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: responsiveWidth(18),
        paddingVertical: responsiveHeight(10),
        gap: responsiveHeight(3)
    },
    text: {
        color: "#2B2D3A",
        fontSize: RFPercentage(3),
        textAlign: "center"
    },
    cancelButton: {
        flex: 0,
        width: responsiveWidth(30)
    },
    pseudoInput: {
        backgroundColor: "red",
        opacity: 0,
        position: "absolute",
        zIndex: -1
    }
})
export default ScanModal;