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

export function CrateList() {
    const {
        crates,
        active_crate,
        onAddCrate,
        setActiveCrate,
    } = useShopStore(state=> ({
        crates: state.crates,
        active_crate: state.active_crate,
        onAddCrate: state.newCrate,
        setActiveCrate: state.setActiveCrate,
    }));
    return (
        <Accordion defaultActiveKey={active_crate}>
            {crates.map((crate, index) =>
                <Accordion.Item eventKey={crate.id} key={"accordion"+crate.id} >
                    <Accordion.Header onClick={() => setActiveCrate(crate.id)}>Crate #{`${index}`}</Accordion.Header>
                    <Accordion.Body>
                        <Crate crate_index={index}/>
                    </Accordion.Body>
                </Accordion.Item>
            )}
            <Accordion.Item eventKey="last">
                <Accordion.Header onClick={onAddCrate}>
                    Add new crate
                    <img src="/images/shop/icon-add.svg" alt="add" width="32px"/>
                </Accordion.Header>
            </Accordion.Item>
        </Accordion>)
}