import {FC} from "react";
import {FlatList, StyleSheet, View} from "react-native";
import Modal from "react-native-modal";
import {FlashList} from "@shopify/flash-list";
import SelectProductElement from "./SelectProductElement";
import {SupplierProduct} from "../../../types/supplierProduct";
import FlashListSeparator from "../../FlashListSeparator/FlashListSeparator";
import DTitle from "../../DTitle/DTitle";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {background} from "../../../css/colors";
import {Product} from "../../../types/product";

type Props = {
    visible: boolean;
    products: Product[];
    onSelected: (product: Product) => void
}


const SelectProductModal: FC<Props> = ({visible, products, onSelected}) => {
    return (
        <Modal isVisible={visible}>
            <View style={styles.container}>
                <DTitle style={styles.title}>К штрихкоду привязано несколько
                    товаров, выберите конкретный</DTitle>
                <FlatList
                    keyboardShouldPersistTaps={"never"}
                    data={products}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                    keyExtractor={(product) => product.productId.toString()}
                    renderItem={(product) => <SelectProductElement product={product.item} onPress={onSelected}/>}
                    ItemSeparatorComponent={FlashListSeparator}
                >

                </FlatList>
            </View>

        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: background,
        borderRadius: responsiveWidth(2),
        paddingHorizontal: responsiveWidth(5),
        paddingVertical: responsiveHeight(5),
        rowGap: responsiveHeight(3),
        marginVertical:responsiveHeight(10)
    },
    title: {
        textAlign: "center"
    },
    listContainer: {
        flex: 1
    }
})

export default SelectProductModal;