import {useShopStore} from "./shop_store";
import {ProcessOptions} from "./options/Options";
import React from "react";

export function OrderOptions() {
    const optionsLogic = useShopStore((state) => state.order_options);
    const updateOptions = useShopStore((state) => state.updateOrderOptions);
    const options_data = useShopStore((state) => state.order_options_data || {});

    const options = ProcessOptions({
        options: optionsLogic,
        data: options_data,
        id: "order_options",
        target: {
            construct: ((outvar, value) => {
                // #!options_log
                console.log("construct", outvar, value, options_data);

                options_data[outvar] = value;
                updateOptions({[outvar]: value});
            }),
            update: ((outvar, value) => {
                // #!options_log
                console.log("update", outvar, value, options_data);

                if (outvar in options_data) options_data[outvar] = value;

                updateOptions({[outvar]: value});
            })
        }
    });

    return (
        <div className="order-bar">
            {options}
        </div>
    )
}