import React, {FC, useRef, useState} from "react";
import {Image, StyleSheet, TextInput, TouchableOpacity, View} from "react-native";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {RFPercentage} from "react-native-responsive-fontsize";
import BasicButton from "../BasicButton/BasicButton";
import ScanModal from "./ScanModal";
import telegramAuthButton from "../TelegramAuthButton/TelegramAuthButton";

type Props = {
    onSearch: (text: string) => void;
}
const SearchBar: FC<Props> = ({onSearch}) => {
    const [isScanModalVisible, setIsScanModalVisible] = useState<boolean>(false);
    const [searchInput, setSearchInput] = useState<string>("");
    const textInputRef = useRef<TextInput>(null);
    return (
        <View style={styles.container}>
            <ScanModal
                onChanged={(text) => {
                    setIsScanModalVisible(false);
                    onSearch(text);
                }}
                onCancelButtonPress={() => setIsScanModalVisible(false)}
                visible={isScanModalVisible}/>
            <BasicButton onPress={() => {
                onSearch(searchInput);
                if (textInputRef.current) {
                    textInputRef.current.clear();
                }
            }} style={styles.scanButton} label={"Поиск"}/>
            <View style={styles.scanImageWrapper}>
                <TouchableOpacity onPress={() => setIsScanModalVisible(true)}>
                    <Image style={styles.scanImage} source={require('assets/icons/scan.png')}/>
                </TouchableOpacity>
            </View>
            <TextInput ref={textInputRef} onChangeText={(text) => {
                setSearchInput(text);
            }} style={styles.textInput} placeholder={"Введите запрос"}/>
        </View>
    )
}

const height = 6;
const styles = StyleSheet.create({
    container: {
        display: "flex",
        marginHorizontal: responsiveWidth(5),
        flexDirection: "row-reverse",
        height: responsiveHeight(height),
        alignItems: "flex-end"
    },
    scanImage: {
        height: responsiveHeight(5),
        width: responsiveHeight(5),

    },
    scanButton: {
        borderRadius: 0,
        borderTopRightRadius: responsiveWidth(1),
        borderBottomRightRadius: responsiveWidth(1),
        width: responsiveWidth(25)
    },
    scanImageWrapper: {
        paddingHorizontal: responsiveWidth(1),
        height: responsiveHeight(height),
        display: "flex",
        justifyContent: "center",
        borderWidth: 1,
        borderColor: "#A5A5A5",
    },
    textInput: {
        height: responsiveHeight(height),
        flex: 1,
        borderWidth: 1,
        borderColor: "#A5A5A5",
        borderTopLeftRadius: responsiveWidth(1),
        borderBottomLeftRadius: responsiveWidth(1),
        paddingLeft: responsiveHeight(2),
        fontSize: RFPercentage(2),
        fontFamily: 'SF Pro Text'
    }
})

export default SearchBar
