import {FC, useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {RootState} from "../../redux/store";
import {Picker} from "@react-native-picker/picker";
import generalApi from "../../api/generalApi";
import {
    initializeShippingWarehouseSelect,
    selectShippingWarehouse
} from "../../features/shippingWarehouseSelect/shippingWarehouseSelectSlice";
import {responsiveWidth} from "react-native-responsive-dimensions";
import {View} from "react-native";

const ShippingWarehouseSelect: FC = () => {
    const state = useSelector((state: RootState) => state.shippingWarehouseSelect);
    const dispatch = useDispatch();
    useEffect(() => {
        if (state.initialized) return;
        generalApi.getShippingWarehouses().then(shippingWarehouses =>
            dispatch(initializeShippingWarehouseSelect(shippingWarehouses)))
    }, []);
    return (
        <View style={{
            borderWidth: responsiveWidth(0.1),
            borderRadius: responsiveWidth(1)
        }}>
            <Picker
                selectedValue={state.selectedShippingWarehouse?.id}
                onValueChange={(value, event) => dispatch(selectShippingWarehouse({shippingWarehouseId: value}))}
            >
                {state.shippingWarehouses.map(shippingWarehouse => (
                    <Picker.Item
                        key={shippingWarehouse.id}
                        label={shippingWarehouse.name}
                        value={shippingWarehouse.id}
                        style={{fontSize: responsiveWidth(3)}}
                    />
                ))}
            </Picker>
        </View>

    )
}

export default ShippingWarehouseSelect