import React from 'react';

import {useShopStore} from "./shop_store";
import {ProcessOptions, ProcessOptionsToData} from "./options/Options";

export function CrateOptions({crate_index}) {
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const optionsLogic = useShopStore((state) => state.crate_options);
    const updateOptions = useShopStore((state) => state.updateCrateOptions);
    const options_data = useShopStore((state) => state.crates[crate_index].options_data || {});

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

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

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

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

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