import React from 'react'
import {Accordion} from "react-bootstrap";
import {Crate} from "./Crate";
import {useShopStore} from "./shop_store";
import {useRenderCount} from "@uidotdev/usehooks";

export function CrateList() {
    const renderCount = useRenderCount();

    const crates = useShopStore((state) => state.crates,
        (a, b) => a.length === b.length);
    const active_crate = useShopStore((state) => state.active_crate);
    const onAddCrate = useShopStore((state) => state.newCrate);
    const setActiveCrate = useShopStore((state) => state.setActiveCrate);

    console.log("CrateList renders: ", renderCount)
    return (
        <Accordion id="accordion_crates" flush activeKey={active_crate} onSelect={(e) => {
            // if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded
            if (e !== null)
                setActiveCrate(e);
            else
                setActiveCrate("")
            }}>
            {crates.map((crate, index) =>
                <Accordion.Item eventKey={crate.id} key={"accordion"+crate.id} className="accordion_crates_item">
                    <Accordion.Header>Crate #{`${index}`}</Accordion.Header>
                    <Accordion.Body>
                        <Crate crate_index={index}/>
                    </Accordion.Body>
                </Accordion.Item>
            )}
            <Accordion.Item eventKey="last" id="accordion_crates_add">
                <Accordion.Header onClick={onAddCrate}>
                    Add new crate
                </Accordion.Header>
            </Accordion.Item>
        </Accordion>)
}