def create_get_item_state(index, key, default=None):
    def get_item_state(default):
        if index >= len(items_state):
            items_state.append({
                key: default
            })
        else:
            if key not in items_state[index]:
                items_state[index][key] = default
        item = items_state[index]
        return item[key]

    return get_item_state

def create_set_item_state(index, key):
    def set_item_state(value):
        item = items_state[index]
        item[key] = value

    return set_item_state

def create_item(index):
    item = mo.ui.dictionary(
        {
            "component": mo.ui.text(value=create_get_item_state(index, "component")("Onderdeel"), on_change=create_set_item_state(index, "component")),
            "complexity": mo.ui.number(start=0, stop=1000, value=create_get_item_state(index, "complexity")(100), on_change=create_set_item_state(index, "complexity")),
            "state": mo.ui.number(start=0, stop=10, value=create_get_item_state(index, "state")(8), on_change=create_set_item_state(index, "state")),
            "influence": mo.ui.slider(start=0, stop=100, step=5, value=create_get_item_state(index, "influence")(50), on_change=create_set_item_state(index, "influence")),
        }
    )
    return item

items = mo.ui.array([create_item(i) for i in range(num_items.value)])

mo.md(
    """
    | Component | Complexity | State | Influence (in vs outside) |
    | :- | -: | :- | :- |
    """
    + "\n".join(
        [
            f"""
            | {item['component']}
            | {item['complexity'].style({"width": "80px"})}
            | {item['state'].style({"width": "80px"})}
            | {item['influence']}
            """.replace("\n", "")
            for item in items
        ]
    )
)

def create_get_item_state(index, key, default=None):
    def get_item_state(default):
        if index >= len(items_state):
            items_state.append({
                key: default
            })
        else:
            if key not in items_state[index]:
                items_state[index][key] = default
        item = items_state[index]
        return item[key]

    return get_item_state

def create_set_item_state(index, key):
    def set_item_state(value):
        item = items_state[index]
        item[key] = value

    return set_item_state

def create_item(index):
    item = mo.ui.dictionary(
        {
            "component": mo.ui.text(value=create_get_item_state(index, "component")("Onderdeel"), on_change=create_set_item_state(index, "component")),
            "complexity": mo.ui.number(start=0, stop=1000, value=create_get_item_state(index, "complexity")(100), on_change=create_set_item_state(index, "complexity")),
            "state": mo.ui.number(start=0, stop=10, value=create_get_item_state(index, "state")(8), on_change=create_set_item_state(index, "state")),
            "influence": mo.ui.slider(start=0, stop=100, step=5, value=create_get_item_state(index, "influence")(50), on_change=create_set_item_state(index, "influence")),
        }
    )
    return item

items = mo.ui.array([create_item(i) for i in range(num_items.value)])

mo.md(
    """
    | Component | Complexity | State | Influence (in vs outside) |
    | :- | -: | :- | :- |
    """
    + "\n".join(
        [
            f"""
            | {item['component']}
            | {item['complexity'].style({"width": "80px"})}
            | {item['state'].style({"width": "80px"})}
            | {item['influence']}
            """.replace("\n", "")
            for item in items
        ]
    )
)