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

export function CrateList({crates, isMobile, isTouch, onAddCrate, onDeleteCrate, onModeChange}) {
    const onClickAdd = (_) => {
        onAddCrate("crate" + Object.entries(crates).length);
    }

    return (
        <Accordion defaultActiveKey="0">
            {Object.entries(crates).map(([crate_id, crate], index) =>
                <Accordion.Item eventKey={`${index}`} key={`crate${index}`}>
                    <Accordion.Header>Crate #{`${index}`}</Accordion.Header>
                    <Accordion.Body>
                        <Crate
                            data={{id: crate_id, ...crate}}
                            isTouch={isTouch}
                            isMobile={isMobile}
                            onDelete={onDeleteCrate}
                            onModeChange={(new_mode) => onModeChange(crate_id, new_mode)}
                        />
                    </Accordion.Body>
                </Accordion.Item>
            )}
            <Accordion.Item eventKey="last">
                <Accordion.Header>
                    Add new crate
                    <button style={{width: "32px"}} onClick={onClickAdd}>
                        <img src="/images/shop/icon-add.svg" alt="add" />
                    </button>
                </Accordion.Header>
            </Accordion.Item>
        </Accordion>)
}